Top 20 Angular 9 Interview Questions

angular

I recently found myself interviewing for a position as an Angular developer. I have been developing with Angular since the beginning with AngularJS and have worked with every major version of Angular released. I work with Angular all day long, every day. So, answering a few interview questions should be a breeze, right? The interview did not go well.

It turns out that working with a technology and explaining a technology are different skills. For example, I was asked to explain binding in Angular; a core feature of the framework. I don’t remember what my answer was, but it must have sounded like I have never used an Angular binding before.

This is why I made this list of 20 things you should not only know about Angular 9, but also be able to talk about in an interview.

Questions

What is Angular Framework?

Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, and many more other features are used to ease the development.
What is TypeScript?

TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await, and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as a primary language.
What are the key components of Angular?
1. Component: These are the basic building blocks of angular application to control HTML views.
2. Modules: An angular module is set of angular basic building blocks like component, directives, services etc. An application is divided into logical pieces and each piece of code is called as “module” which perform a single task.
3. Templates: This represent the views of an Angular application.
4. Services: It is used to create components which can be shared across the entire application.
5. Metadata: This can be used to add more data to an Angular class.

What are directives?

Directives add behaviour to an existing DOM element or an existing component instance.

 import { Directive, ElementRef, Input } from '@angular/core';

 @Directive({ selector: '[myHighlight]' })
 export class HighlightDirective {
     constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';
     }
 }

Now this directive extends HTML element behavior with a yellow background as below

 <p myHighlight>Highlight me!</p>

What are components?

Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. Let’s see a simple example of Angular component
```
 import { Component } from '@angular/core';

 @Component ({
    selector: 'my-app',
    template: ` <div>
       <h1>{{title}}</h1>
       <div>Learn Angular6 with examples</div>
    </div> `,
 })

 export class AppComponent {
    title: string = 'Welcome to Angular world';
 }
```

What is a template?

A template is a HTML view where you can display data by binding controls to properties of an Angular component. You can store your component’s template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator’s templateUrl property.

Using inline template with template syntax,

 import { Component } from '@angular/core';

 @Component ({
    selector: 'my-app',
    template: '
       <div>
          <h1>{{title}}</h1>
          <div>Learn Angular</div>
       </div>
    '
 })

 export class AppComponent {
    title: string = 'Hello World';
 }

Using separate template file such as app.component.html

 import { Component } from '@angular/core';

 @Component ({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
 })

 export class AppComponent {
    title: string = 'Hello World';
 }

What is a module?

Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application. Lets take an example of app.module.ts root module declared with @NgModule decorator as below,
```
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent }  from './app.component';

 @NgModule ({
    imports:      [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
 })
 export class AppModule { }
```
The NgModule decorator has three options
1. The imports option is used to import other dependent modules. The BrowserModule is required by default for any web based angular application
2. The declarations option is used to define components in the respective module
3. The bootstrap option tells Angular which Component to bootstrap in the application
What is a data binding?

Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding(divided as 3 categories) which differ in the way the data is flowing.
1. From the Component to the DOM:
  
  Interpolation: {{ value }}: Adds the value of a property from the component
```
 <li>Name: {{ user.name }}</li>
 <li>Address: {{ user.address }}</li>
```
  Property binding: [property]=”value”: The value is passed from the component to the specified property or simple HTML attribute
```
 <input type="email" [value]="user.email">
```
2. From the DOM to the Component:
  
  Event binding: (event)=”function”: When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component
```
 <button (click)="logout()"></button>
```
3. Two-way binding:
  
  Two-way data binding: [(ngModel)]=”value”: Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync
```
 <input type="email" [(ngModel)]="user.email">
```

What is metadata?

Metadata is used to decorate a class so that it can configure the expected behavior of the class. The metadata is represented by decorators

Class decorators, e.g. @Component and @NgModule

 import { NgModule, Component } from '@angular/core';

 @Component({
   selector: 'my-component',
   template: '<div>Class decorator</div>',
 })
 export class MyComponent {
   constructor() {
     console.log('Hey I am a component!');
   }
 }

 @NgModule({
   imports: [],
   declarations: [],
 })
 export class MyModule {
   constructor() {
     console.log('Hey I am a module!');
   }
 }

Property decorators Used for properties inside classes, e.g. @Input and @Output

 import { Component, Input } from '@angular/core';

 @Component({
     selector: 'my-component',
     template: '<div>Property decorator</div>'
 })

 export class MyComponent {
     @Input()
     title: string;
 }

Method decorators Used for methods inside classes, e.g. @HostListener

 import { Component, HostListener } from '@angular/core';

 @Component({
     selector: 'my-component',
     template: '<div>Method decorator</div>'
 })
 export class MyComponent {
     @HostListener('click', ['$event'])
     onHostClick(event: Event) {
         // clicked, `event` available
     }
 }

Parameter decorators Used for parameters inside class constructors, e.g. @Inject

 import { Component, Inject } from '@angular/core';
 import { MyService } from './my-service';

 @Component({
     selector: 'my-component',
     template: '<div>Parameter decorator</div>'
 })
 export class MyComponent {
     constructor(@Inject(MyService) myService) {
         console.log(myService); // MyService
     }
 }

What is the difference between constructor and ngOnInit?

TypeScript classes has a default method called constructor which is normally used for the initialization purpose. Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit, you need to implement OnInit interface as below,
```
 export class App implements OnInit{
   constructor(){
      //called first time before the ngOnInit()
   }

   ngOnInit(){
      //called after the constructor and called  after the first ngOnChanges()
   }
 }
```

What is a service?

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components. Let’s create a repoService which can be used across components,

 import { Injectable } from '@angular/core';
 import { Http } from '@angular/http';

 @Injectable({ // The Injectable decorator is required for dependency injection to work
   // providedIn option registers the service with a specific NgModule
   providedIn: 'root',  // This declares the service with the root app (AppModule)
 })
 export class RepoService{
   constructor(private http: Http){
   }

   fetchAll(){
     return this.http.get('https://api.github.com/repositories');
   }
 }

The above service uses Http service as a dependency.

What is dependency injection in Angular?

Dependency injection (DI), is an important application design pattern in which a class asks for dependencies from external sources rather than creating them itself. Angular comes with its own dependency injection framework for resolving dependencies( services or objects that a class needs to perform its function).So you can have your services depend on other services throughout your application.
What is the purpose of ngFor directive?

We use Angular ngFor directive in the template to display each item in the list. For example, here we iterate over list of users,
```
 <li *ngFor="let user of users">
   {{ user }}
 </li>
```
The user variable in the ngFor double-quoted instruction is a template input variable
What is the purpose of ngIf directive?

Sometimes an app needs to display a view or a portion of a view only under specific circumstances. The Angular ngIf directive inserts or removes an element based on a truthy/falsy condition. Let’s take an example to display a message if the user age is more than 18,
```
 <p *ngIf="user.age > 18">You are not eligible for student pass!</p>
```
Note: Angular isn’t showing and hiding the message. It is adding and removing the paragraph element from the DOM. That improves performance, especially in the larger projects with many data bindings.
What happens if you use script tag inside template?

Angular recognizes the value as unsafe and automatically sanitizes it, which removes the <script> tag but keeps safe content such as the text content of the <script> tag. This way it eliminates the risk of script injection attacks. If you still use it then it will be ignored and a warning appears in the browser console. Let’s take an example of innerHtml property binding which causes XSS vulnerability,
```
 export class InnerHtmlBindingComponent {
   // For example, a user/attacker-controlled value from a URL.
   htmlSnippet = 'Template <script>alert("0wned")</script> <b>Syntax</b>';
 }
```

What are pipes?

A pipe takes in data as input and transforms it to a desired output. For example, let us take a pipe to transform a component’s birthday property into a human-friendly date using date pipe.

 import { Component } from '@angular/core';

 @Component({
   selector: 'app-birthday',
   template: `<p>Birthday is {{ birthday | date }}</p>`
 })
 export class BirthdayComponent {
   birthday = new Date(1987, 6, 18); // June 18, 1987
 }

What is HttpClient and its benefits?

Most of the Front-end applications communicate with backend services over HTTP protocol using either XMLHttpRequest interface or the fetch() API. Angular provides a simplified client HTTP API known as HttpClient which is based on top of XMLHttpRequest interface. This client is avaialble from @angular/common/http package. You can import in your root module as below,
```
import { HttpClientModule } from '@angular/common/http';
```
The major advantages of HttpClient can be listed as below,
1. Contains testability features
2. Provides typed request and response objects
3. Intercept request and response
4. Supports Observalbe APIs
5. Supports streamlined error handling
What is RxJS?

RxJS is a library for composing asynchronous and callback-based code in a functional, reactive style using Observables. Many APIs such as HttpClient produce and consume RxJS Observables and also uses operators for processing observables. For example, you can import observables and operators for using HttpClient as below,
```
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';
```

What is subscribing?

An Observable instance begins publishing values only when someone subscribes to it. So you need to subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications. Let’s take an example of creating and subscribing to a simple observable, with an observer that logs the received message to the console.

 Creates an observable sequence of 5 integers, starting from 1
 const source = range(1, 5);

 // Create observer object
 const myObserver = {
   next: x => console.log('Observer got a next value: ' + x),
   error: err => console.error('Observer got an error: ' + err),
   complete: () => console.log('Observer got a complete notification'),
 };

 // Execute with the observer object and Prints out each item
 source.subscribe(myObserver);
 // => Observer got a next value: 1
 // => Observer got a next value: 2
 // => Observer got a next value: 3
 // => Observer got a next value: 4
 // => Observer got a next value: 5
 // => Observer got a complete notification

What is an observable?

An Observable is a unique Object similar to a Promise that can help manage async code. Observables are not part of the JavaScript language so we need to rely on a popular Observable library called RxJS. The observables are created using new keyword. Let see the simple example of observable,
```
 import { Observable } from 'rxjs';

 const observable = new Observable(observer => {
   setTimeout(() => {
     observer.next('Hello from a Observable!');
   }, 2000);
 });
```

What is the purpose of async pipe?

The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes. Let’s take a time observable which continuously updates the view for every 2 seconds with the current time.

 @Component({
   selector: 'async-observable-pipe',
   template: `<div><code>observable|async</code>:
        Time: {{ time | async }}</div>`
 })
 export class AsyncObservablePipeComponent {
   time = new Observable(observer =>
     setInterval(() => observer.next(new Date().toString()), 2000)
   );
 }

What are different types of compilation in Angular?

Angular offers two ways to compile your application,
1. Just-in-Time (JIT)
2. Ahead-of-Time (AOT)
What is JIT?

Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime. JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands. i.e, the below commands used for JIT compilation,
```
 ng build
 ng serve
```
What is AOT?

Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time. For AOT compilation, include the --aot option with the ng build or ng serve command as below,
```
 ng build --aot
 ng serve --aot
```
Note: The ng build command with the –prod meta-flag (ng build --prod) compiles with AOT by default.
Why do we need compilation process?

The Angular components and templates cannot be understood by the browser directly. Due to that Angular applications require a compilation process before they can run in a browser. For example, In AOT compilation, both Angular HTML and TypeScript code converted into efficient JavaScript code during the build phase before browser runs it.
What are the advantages with AOT?

Below are the list of AOT benefits,
1. Faster rendering: The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.
2. Fewer asynchronous requests: It inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests.
3. Smaller Angular framework download size: Doesn’t require downloading the Angular compiler. Hence it dramatically reduces the application payload.
4. Detect template errors earlier: Detects and reports template binding errors during the build step itself
5. Better security: It compiles HTML templates and components into JavaScript. So there won’t be any injection attacks.

Written on February 18, 2020

Top 20 Angular 9 Interview Questions

Questions

What is Angular Framework?

What is TypeScript?

What are the key components of Angular?

What are directives?

What are components?

What is a template?

What is a module?

What is a data binding?

What is metadata?

What is the difference between constructor and ngOnInit?

What is a service?

What is dependency injection in Angular?

What is the purpose of ngFor directive?

What is the purpose of ngIf directive?

What happens if you use script tag inside template?

What are pipes?

What is HttpClient and its benefits?

What is RxJS?

What is subscribing?

What is an observable?

What is the purpose of async pipe?

What are different types of compilation in Angular?

What is JIT?

What is AOT?

Why do we need compilation process?

What are the advantages with AOT?