Angular Interview Questions

When you change the translatable text, the Angular extractor tool generates a new id for that translation unit. Because of this behavior, you must then update the translation file with the new id every time.

For example, the translation file messages.de.xlf.html has generated trans-unit for some text message as below

<trans-unit id="827wwe104d3d69bf669f823jjde888" datatype="html">

You can avoid this manual update of id attribute by specifying a custom id in the i18n attribute by using the prefix @@.

<h1 i18n="@@welcomeHeader">Hello i18n!</h1>

You need to define custom ids as unique. If you use the same id for two different text messages then only the first one is extracted. But its translation is used in place of both original text messages.

For example, let's define same custom id myCustomId for two messages,

<h2 i18n="@@myCustomId">Good morning</h3>
<!-- ... -->
<h2 i18n="@@myCustomId">Good night</p>

and the translation unit generated for first text in for German language as

<trans-unit id="myId" datatype="html">
<source>Good morning</source>
<target state="new">Guten Morgen</target>
</trans-unit>

Since custom id is the same, both of the elements in the translation contain the same text as below

<h2>Guten Morgen</h2>
<h2>Guten Morgen</h2>

Yes, you can achieve using <ng-container> attribute. Normally you need to wrap a text content with i18n attribute for the translation. But if you don't want to create a new DOM element just for the sake of translation, you can wrap the text in an <ng-container> element.

<ng-container i18n>I'm not using any DOM element for translation</ng-container>

Remember that <ng-container> is transformed into an html comment

You can translate attributes by attaching i18n-x attribute where x is the name of the attribute to translate. For example, you can translate image title attribute as below,

By the way, you can also assign meaning, description and id with the i18n-x="<meaning>|<description>@@<id>" syntax.

Pluralization has below categories depending on the language.

1. =0 (or any other number)
2. zero
3. one
4. two
5. few
6. many
7. other

ICU expression is is similar to the plural expressions except that you choose among alternative translations based on a string value instead of a number. Here you define those string values.

Let's take component binding with residenceStatus property which has "citizen", "permanent resident" and "foreigner" possible values and the message maps those values to the appropriate translations.

<span i18n>The person is {residenceStatus, select, citizen {citizen} permanent resident {permanentResident} foreigner {foreigner}}</span>

By default, When translation is missing, it generates a warning message such as "Missing translation for message 'somekey'". But you can configure with a different level of message in Angular compiler as below,

1. Error: It throws an error. If you are using AOT compilation, the build will fail. But if you are using JIT compilation, the app will fail to load.
2. Warning (default): It shows a 'Missing translation' warning in the console or shell.
3. Ignore: It doesn't do anything.

If you use AOT compiler then you need to perform changes in configurations section of your Angular CLI configuration file, angular.json.

"configurations": {
...
"de": {
...
"i18nMissingTranslation": "error"
}
}

If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding the 'MissingTranslationStrategy' property as below,

import { MissingTranslationStrategy } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, {
missingTranslation: MissingTranslationStrategy.Error,
providers: [
// ...
]
});

You can provide build configuration such as translation file path, name, format and application url in configuration settings of Angular.json file. For example, the German version of your application configured the build as follows,

"configurations": {
"de": {
"aot": true,
"outputPath": "dist/my-project-de/",
"baseHref": "/fr/",
"i18nFile": "src/locale/messages.de.xlf",
"i18nFormat": "xlf",
"i18nLocale": "de",
"i18nMissingTranslation": "error",
}

An Angular library is an Angular project that differs from an app in that it cannot run on its own. It must be imported and used in an app. For example, you can import or add service worker library to an Angular application which turns an application into a Progressive Web App (PWA).

Note: You can create own third party library and publish it as npm package to be used in an Application.

The AOT compiler is part of a build process that produces a small, fast, ready-to-run application package, typically for production. It converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

You can control any DOM element via ElementRef by injecting it into your component's constructor. i.e, The component should have constructor with ElementRef parameter,

constructor(myElement: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}

TestBed is an api for writing unit tests for Angular applications and it's libraries. Even though We still write our tests in Jasmine and run using Karma, this API provides an easier way to create components, handle injection, test asynchronous behaviour and interact with our application.

Protractor is an end-to-end test framework for Angular and AngularJS applications. It runs tests against your application running in a real browser, interacting with it as a user would.

npm install -g protractor

Collection is a set of related schematics collected in an npm package. For example, @schematics/angular collection is used in Angular CLI to apply transforms to a web-app project. You can create your own schematic collection for customizing angular projects.

You can create your own schematic collections to integrate your library with the Angular CLI. These collections are classified as 3 main schematics,

1. Add schematics: These schematics are used to install library in an Angular workspace using ng add command. For example, @angular/material schematic tells the add command to install and set up Angular Material and theming.
2. Generate schematics: These schematics are used to modify projects, add configurations and scripts, and scaffold artifacts in library using ng generate command. For example, @angular/material generation schematic supplies generation schematics for the UI components. Let's say the table component is generated using ng generate @angular/material:table .
3. Update schematics: These schematics are used to update library's dependencies and adjust for breaking changes in a new library release using ng update command. For example, @angular/material update schematic updates material and cdk dependencies using ng update @angular/material command.