Angular Interview Questions Part 4

What is the reason to deprecate Web Tracing Framework?

Angular has supported the integration with the Web Tracing Framework (WTF) for the purpose of performance testing. Since it is not well maintained and failed in majority of the applications, the support is deprecated in latest releases.

What is the reason to deprecate web worker packages?

Both @angular/platform-webworker and @angular/platform-webworker-dynamic are officially deprecated, the Angular team realized it’s not good practice to run the Angular application on Web worker

How do you find angular CLI version?

Angular CLI provides it’s installed version using below different ways using ng command,

ng v
ng version
ng -v
ng --version

and the output would be as below,

Angular CLI: 1.6.3
Node: 8.11.3
OS: darwin x64
Angular:
...

Angular Interview Question

What is schematic?

It’s a scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. It defines rules that operate on a virtual file system called a tree.

What is rule in Schematics?

In schematics world, it’s a function that operates on a file tree to create, delete, or modify files in a specific manner.

What is Schematics CLI?

Schematics come with their own command-line tool known as Schematics CLI. It is used to install the schematics executable, which you can use to create a new schematics collection with an initial named schematic. The collection folder is a workspace for schematics. You can also use the schematics command to add a new schematic to an existing collection, or extend an existing schematic. You can install Schematic CLI globally as below,

npm install -g @angular-devkit/schematics-cli

Advance Angular Interview Question

What are the best practices for security in angular?

Below are the best practices of security in angular,

  1. Use the latest Angular library releases
  2. Don’t modify your copy of Angular
  3. Avoid Angular APIs marked in the documentation as “Security Risk.”

What is Angular security model for preventing XSS attacks?

Angular treats all values as untrusted by default. i.e., Angular sanitizes and escapes untrusted values When a value is inserted into the DOM from a template, via property, attribute, style, class binding, or interpolation.

What is the role of template compiler for prevention of XSS attacks?

The offline template compiler prevents vulnerabilities caused by template injection, and greatly improves application performance. So it is recommended to use offline template compiler in production deployments without dynamically generating any template.

Angular Interview Question

What are the various security contexts in Angular?

Angular defines the following security contexts for sanitization,

  1. HTML: It is used when interpreting a value as HTML such as binding to innerHtml.
  2. Style: It is used when binding CSS into the style property.
  3. URL: It is used for URL properties such as <a href>.
  4. Resource URL: It is a URL that will be loaded and executed as code such as <script src>.

What is Sanitization? Is angular supports it?

Sanitization is the inspection of an untrusted value, turning it into a value that’s safe to insert into the DOM. Yes, Angular supports sanitization. It sanitizes untrusted values for HTML, styles, and URLs but sanitizing resource URLs isn’t possible because they contain arbitrary code.

What is the purpose of inner HTML?

The inner HTML is a property of HTML-Elements, which allows you to set it’s html-content programmatically. Let’s display the below html code snippet in a <div> tag as below using inner HTML binding,

<div [innerHTML]="htmlSnippet"></div>

and define the HTML Snippet property from any component

export class myComponent {
  htmlSnippet: string = '<b>Hello World</b>, Angular';
}

Unfortunately this property could cause Cross Site Scripting (XSS) security bugs when improperly handled.

Advance Angular Interview Question

What is the difference between interpolated content and inner HTML?

The main difference between interpolated and inner HTML code is the behavior of code interpreted. Interpolated content is always escaped i.e., HTML isn’t interpreted and the browser displays angle brackets in the element’s text content. Where as in inner HTML binding, the content is interpreted i.e., the browser will convert < and > characters as HTML Entities. For example, the usage in template would be as below,

<p>Interpolated value:</p>
<div >{{htmlSnippet}}</div>
<p>Binding of innerHTML:</p>
<div [innerHTML]="htmlSnippet"></div>

and the property defined in a component.

export class InnerHtmlBindingComponent {
  htmlSnippet = 'Template <script>alert("XSS Attack")</script> <b>Code attached</b>';
}

Even though inner HTML binding create a chance of XSS attack, Angular recognizes the value as unsafe and automatically sanitizes it.

How do you prevent automatic sanitization?

Sometimes the applications genuinely need to include executable code such as displaying <iframe> from an URL. In this case, you need to prevent automatic sanitization in Angular by saying that you inspected a value, checked how it was generated, and made sure it will always be secure. Basically it involves 2 steps,

  1. Inject Dom Sanitizer: You can inject Dom Sanitizer in component as parameter in constructor
  2. Mark the trusted value by calling some of the below methods
    1. by pass Security Trust Html
    2. by pass Security Trust Script
    3. by pass Security Trust Style
    4. by pass Security Trust URL
    5. by pass Security Trust Resource URL

For example,The usage of dangerous url to trusted url would be as below,

constructor(private sanitizer: DomSanitizer) {
  this.dangerousUrl = 'javascript:alert("XSS attack")';
  this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);

Is safe to use direct DOM API methods in terms of security?

No, the built-in browser DOM APIs or methods don’t automatically protect you from security vulnerabilities. In this case it is recommended to use Angular templates instead of directly interacting with DOM. If it is unavoidable then use the built-in Angular sanitization functions.

Angular Interview Question

What is DOM sanitizer?

Dom Sanitizer is used to help preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

How do you support server side XSS protection in Angular application?

The server-side XSS protection is supported in an angular application by using a templating language that automatically escapes values to prevent XSS vulnerabilities on the server. But don’t use a templating language to generate Angular templates on the server side which creates a high risk of introducing template-injection vulnerabilities.

Is angular prevents http level vulnerabilities?

Angular has built-in support for preventing http level vulnerabilities such as as cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Even though these vulnerabilities need to be mitigated on server-side, Angular provides helpers to make the integration easier on the client side.

  1. HTTP Client supports a token mechanism used to prevent XSRF attacks
  2. HTTP Client library recognizes the convention of prefixed JSON responses(which non-executable js code with “)]}’,\n” characters) and automatically strips the string “)]}’,\n” from all responses before further parsing

Angular Interview Question

What are Http Interceptors?

Http Interceptors are part of @angular/common/http, which inspect and transform HTTP requests from your application to the server and vice-versa on HTTP responses. These interceptors can perform a variety of implicit tasks, from authentication to logging.

The syntax of HTTP Interceptor interface looks like as below,

interface HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
}

You can use interceptors by declaring a service class that implements the intercept() method of the HTTP Interceptor interface.

@Injectable()
export class MyInterceptor implements HttpInterceptor {
    constructor() {}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        ...
    }
}

After that you can use it in your module,

@NgModule({
    ...
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MyInterceptor,
            multi: true
        }
    ]
    ...
})
export class AppModule {}

What are the applications of HTTP interceptors?

The HTTP Interceptors can be used for different variety of tasks,

  1. Authentication
  2. Logging
  3. Caching
  4. Fake backend
  5. URL transformation
  6. Modifying headers

Is multiple interceptors supported in Angular?

Yes, Angular supports multiple interceptors at a time. You could define multiple interceptors in providers property:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: MyFirstInterceptor, multi: true },
  { provide: HTTP_INTERCEPTORS, useClass: MySecondInterceptor, multi: true }
],

The interceptors will be called in the order in which they were provided. i.e., My First Interceptor will be called first in the above interceptors configuration.

Advance Angular Interview Question

How can I use interceptor for an entire application?

You can use same instance of Http Interceptors for the entire app by importing the Http Client Module only in your App Module, and add the interceptors to the root application injector. For example, let’s define a class that is injectable in root application.

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    return next.handle(req).do(event => {
      if (eventt instanceof HttpResponse) {
           // Code goes here
      }
    });

  }
}

After that import Http Client Module in App Module

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

How does Angular simplifies Internationalization?

Angular simplifies the below areas of internationalization,

  1. Displaying dates, number, percentages, and currencies in a local format.
  2. Preparing text in component templates for translation.
  3. Handling plural forms of words.
  4. Handling alternative text.

How do you manually register locale data?

By default, Angular only contains locale data for en-US which is English as spoken in the United States of America . But if you want to set to another locale, you must import locale data for that new locale. After that you can register using registerLocaleData method and the syntax of this method looks like below,

registerLocaleData(data: any, localeId?: any, extraData?: any): void

For example, let us import German locale and register it in the application

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe, 'de');

Angular Interview Question

What are the four phases of template translation?

The i18n template translation process has four phases:

  1. Mark static text messages in your component templates for translation: You can place i18n on every element tag whose fixed text is to be translated. For example, you need i18n attribute for heading as below,
<h1 i18n>Hello i18n!</h1>

Create a translation file: Use the Angular CLI xi18n command to extract the marked text into an industry-standard translation source file. i.e, Open terminal window at the root of the app project and run the CLI command xi18n.

ng xi18n
  1. The above command creates a file named messages.xlf in your project’s root directory.
  2. Note: You can supply command options to change the format, the name, the location, and the source locale of the extracted file.
  3. Edit the generated translation file: Translate the extracted text into the target language. In this step, create a localization folder (such as locale)under root directory(src) and then create target language translation file by copying and renaming the default messages.xlf file. You need to copy source text node and provide the translation under target tag. For example, create the translation file(messages.de.xlf) for German language
<trans-unit id="greetingHeader" datatype="html">
  <source>Hello i18n!</source>
  <target>Hallo i18n !</target>
  <note priority="1" from="description">A welcome header for this sample</note>
  <note priority="1" from="meaning">welcome message</note>
</trans-unit>
  1. Merge the completed translation file into the app: You need to use Angular CLI build command to compile the app, choosing a locale-specific configuration, or specifying the following command options.
    1. –i18nFile=path to the translation file
    2. –i18nFormat=format of the translation file
    3. –i18nLocale= locale id

What is the purpose of i18n attribute?

The Angular i18n attribute marks translatable content. It is a custom attribute, recognized by Angular tools and compilers. The compiler removes it after translation.

Note: Remember that i18n is not an Angular directive.

What is the purpose of custom id?

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>

Advance Angular Interview Question

What happens if the custom id is not unique?

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>

Can I translate text without creating an element?

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 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

How can I translate attribute?

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,

<img [src]="example" i18n-title title="Internationlization" />

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

Angular Interview Question

List down the pluralization categories?

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

What is select ICU expression?

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 residence Status 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 {residence Status, select, citizen {citizen} permanent resident {permanent Resident} foreigner {foreigner}}</span>

How do you report missing translations?

By default, When translation is missing, it generates a warning message such as “Missing translation for message ‘some key'”. 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: [
    // ...
  ]
});

Advance Angular Interview Question

How do you provide build configuration for multiple locales?

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",
  }

What is an angular library?

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.

How do you select an element in component template?

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

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

Angular Interview Question

What is Test Bed?

Test Bed 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 behavior and interact with our application.

What is protractor?

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

What is collection?

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.

Advance Angular Interview Question

How do you create schematics for libraries?

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.

How do you use jQuery in Angular?

You can use jQuery in Angular using 3 simple steps,

  1. Install the dependency: At first, install the jQuery dependency using npm
npm install --save jquery

Add the jQuery script: In Angular-CLI project, add the relative path to jQuery in the angular.json file.

"scripts": [
   "node_modules/jquery/dist/jquery.min.js"
]

Start using jQuery: Define the element in template. Whereas declare the jQuery variable and apply CSS classes on the element.

<div id="elementId">
  <h1>JQuery integration</h1>
</div>
import {Component, OnInit} from '@angular/core';

declare var $: any; // (or) import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    $(document).ready(() => {
      $('#elementId').css({'text-color': 'blue', 'font-size': '150%'});
    });
  }
}

What is the reason for No provider for HTTP exception?

This exception is due to missing Http Client Module in your module. You just need to import in module as below,

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular Interview Question

How can I use SASS in angular project?

When you are creating your project with angular cli, you can use ng newcommand. It generates all your components with predefined sass files.

ng new My_New_Project --style=sass

But if you are changing your existing style in your project then use ng set command,

ng set defaults.styleExt scss

What is the purpose of hidden property?

The hidden property is used to show or hide the associated DOM element, based on an expression. It can be compared close to ng-show directive in AngularJS. Let’s say you want to show user name based on the availability of user using hidden property.

<div [hidden]="!user.name">
  My name is: {{user.name}}
</div>

What is the difference between ngIf and hidden property?

The main difference is that *ngIf will remove the element from the DOM, while [hidden] actually plays with the CSS style by setting display:none. Generally it is expensive to add and remove stuff from the DOM for frequent actions.

Angular Interview Question

What is slice pipe?

The slice pipe is used to create a new Array or String containing a subset (slice) of the elements. The syntax looks like as below,

{{ value_expression | slice : start [ : end ] }}

For example, you can provide ‘hello’ list based on a greeting array,

@Component({
  selector: 'list-pipe',
  template: `<ul>
    <li *ngFor="let i of greeting | slice:0:5">{{i}}</li>
  </ul>`
})
export class PipeListComponent {
  greeting: string[] = ['h', 'e', 'l', 'l', 'o', 'm','o', 'r', 'n', 'i', 'n', 'g'];
}

What is index property in ng For directive?

The index property of the Ng For directive is used to return the zero-based index of the item in each iteration. You can capture the index in a template input variable and use it in the template.

For example, you can capture the index in a variable named index Var and displays it with the todo’s name using ng For directive as below.

<div *ngFor="let todo of todos; let i=index">{{i + 1}} - {{todo.name}}</div>
Angular Part 1Angular Part 2Angular Part 3Angular Part 5
Back to top