Angular Basics

Click ★ if you like the project. Your contributions are heartily ♡ welcome.

Related Topics

• HTML Basics
• CSS Basics
• JavaScript Basics
• Typescript Basics
• Angular Commands List
• Angular Unit Testing

Projects

Table of Contents

• Introduction
• Configuration and Tools
• Architecture
• Component Interaction
• Angular Forms
• Pipes
• RxJS
• Routing
• Services and DI
• Angular Template
• Angular Animations
• Performance
• Miscellaneous

# 1. INTRODUCTION

Q. What is the difference between AngularJS and Angular?

Angular is a completely revived component-based framework in which an application is a tree of individual components.

a.) AngularJS:

Advantages:

• It has great MVC data binding that makes app development fast.
• Using HTML as a declarative language makes it very intuitive.
• It is a comprehensive solution for rapid front-end development since it does not need any other frameworks or plugins.
• AngularJS apps can run on every significant program and advanced cells including iOS and Android-based phones and tablets.
• Two-way data binding
• Directives
• Dependency injection

Disadvantages:

• It is big and complicated due to the multiple ways of doing the same thing.
• Implementations scale poorly.
• If a user of an AngularJS application disables JavaScript, nothing but the basic page is visible.
• There is a lagging UI if there are more than 200 watchers.

b.) Angular:

Advantages:

• Component-based architecture that provides a higher quality of code
• Reusability: Components of similar nature are well encapsulated, in other words, self-sufficient. Developers can reuse them across different parts of an application.
• Unit-test friendly: The independent nature of components simplifies unit tests, quality assurance procedures aimed at verifying the performance of the smallest parts of the application, units.
• Maintainability: Components that are easily decoupled from each other can be easily replaced with better implementations.

Disadvantages:

• Angular is verbose and complex
• Steep learning curve
• Migrating legacy systems from AngularJS to Angular requires time

# 2. CONFIGURATION AND TOOLS

Q. What is angular CLI?

Angular CLI(Command Line Interface) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. You need to install using below npm command,

npm install @angular/cli@latest

Below are the list of few commands, which will come handy while creating angular projects

1. Creating New Project ng new <project-name> 2. Generating Components, Directives & Services ng generate/g <feature-name>

The different types of commands would be,

• ng generate class my-new-class: add a class to your application
• ng generate component my-new-component: add a component to your application
• ng generate directive my-new-directive: add a directive to your application
• ng generate enum my-new-enum: add an enum to your application
• ng generate module my-new-module: add a module to your application
• ng generate pipe my-new-pipe: add a pipe to your application
• ng generate service my-new-service: add a service to your application

3. Running the Project ng serve

Q. What are the frequently used command in angular?

ng test --watch=false --code-coverage

# 3. ARCHITECTURE

Q. How an Angular application gets started or loaded?

The main.ts file, that is the first code which gets executed. The job of main.ts is to bootstrap the application. It loads everything and controls the startup of the application.

main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Most importantly here is the line where bootstraps start our angular app by passing app module to the method. AppModule refers to the app.module.ts file.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

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

When angular starts, it bootstrap array in @NgModule. It basically there is a list of all components which should be known to Angular at the point of time it analyzes index.html file.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angular 8</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Q. What is difference between Angular JIT compilation and AOT compilation?

Angular has 2 types of build dev build or prod build

1. JIT:

Just-in-Time (JIT) is a type of compilation that compiles 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

2. AOT:
Ahead-of-Time (AOT) is a type of compilation that compiles 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

ng build or ng build --dev   -  this is for development build
ng build --prod              -  this is for production build

• minification - process of removing excess whitespace, comments and optinal tokens like curly braces and semi colons
• uglification - process of transforming code to use short variable and function names
• tree shaking - is the process of removing any code that we are not actually using in our application from the final bundle

Note: The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default.

Q. What are the advantages with AOT?

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 Does not 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 wont be any injection attacks.

Q. What are the ways to control AOT compilation?

You can control your app compilation in two ways

1. By providing template compiler options in the tsconfig.json file
2. By configuring Angular metadata with decorators

Q. What are the three phases of AOT?

The AOT compiler works in three phases,

1. Code Analysis In this phase, the TypeScript compiler and AOT collector create a representation of the source.
2. Code Generation It handles the interpretation as well as places restrictions on what it interprets.
3. Template Type Checking In this phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.

Q. Can I use arrow functions in AOT?

No, Arrow functions or lambda functions can’t be used to assign values to the decorator properties. For example, the following snippet is invalid:

@Component({
  providers: [{
    provide: MyService, useFactory: () => getService()
  }]
})

To fix this, it has to be changed as following exported function:

function getService(){
  return new MyService();
}

@Component({
  providers: [{
    provide: MyService, useFactory: getService
  }]
})

If you still use arrow function, it generates an error node in place of the function. When the compiler later interprets this node, it reports an error to turn the arrow function into an exported function.

Note: From Angular5 onwards, the compiler automatically performs this rewriting while emitting the .js file.

Q. What is Angular Ivy?

Angular Ivy is a new rendering engine for Angular. You can choose to opt in a preview version of Ivy from Angular version 8.

1. You can enable ivy in a new project by using the --enable-ivy flag with the ng new command

ng new ivy-demo-app --enable-ivy

2. You can add it to an existing project by adding enableIvy option in the angularCompilerOptions in your project tsconfig.app.json.

{
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Q. What are the features included in ivy preview?

You can expect below features with Ivy preview,

• Generated code that is easier to read and debug at runtime
• Faster re-build time
• Improved payload size
• Improved template type checking

Q. Can I use AOT compilation with Ivy?

Yes, it is a recommended configuration. Also, AOT compilation with Ivy is faster. So you need set the default build options(with in angular.json) for your project to always use AOT compilation.

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}

Q. What is the purpose of metadata json files?

The metadata.json file can be treated as a diagram of the overall structure of a decorator metadata, represented as an abstract syntax tree(AST). During the analysis phase, the AOT collector scan the metadata recorded in the Angular decorators and outputs metadata information in .metadata.json files, one per .d.ts file.

Q. Can I use any javascript feature for expression syntax in AOT?

No, the AOT collector understands a subset of (or limited) JavaScript features. If an expression uses unsupported syntax, the collector writes an error node to the .metadata.json file. Later point of time, the compiler reports an error if it needs that piece of metadata to generate the application code.

Q. How do you add web workers in your application?

We can add web worker anywhere in our application. For example, If the file that contains expensive computation is src/app/app.component.ts, we can add a Web Worker using ng generate web-worker app command which will create src/app/app.worker.ts web worker file. This command will perform below actions,

1. Configure project to use Web Workers
2. Adds app.worker.ts to receive messages

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

3. The component app.component.ts file updated with web worker file

if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('./app.worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log('page got message: $\{data\}');
  };
  worker.postMessage('hello');
} else {
  // Web Workers are not supported in this environment.
}

Note: You may need to refactor your initial scaffolding web worker code for sending messages to and from.

# 4. COMPONENT INTERACTION

Q. What are components in angular?

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.

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

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

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

Q. What are directives in angular?

Directives add behaviour to an existing DOM element or an existing component instance. There are four types of directives in Angular

• Components directives
• Structural directives
• Attribute directives
• Custom Directive

Structural Directives:

Structural Directives are directives which change the structure of the DOM by adding or removing elements. There are three built in structural directives, NgIf, NgFor and NgSwitch.

Example: Structural Directives

<div *ngIf="user$ | async as user">
  <span>Name: {{user.name}}</span>
  <span>Age: {{user.age}}</span>
</div>

Attribute Directives:

Attribute directives change the appearance or behavior of an element, component, or another directive. ngClass, ngStyle are examples of attribute directives built-in to the Angular framework.

Example: Attribute Directives

<p [ngStyle]="{'background': isBlue ? 'blue' : 'red'}"> I am an Attribute Directive</p>

Example: Custom Directive

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>

Q. What are the differences between Component and Directive?

A component is also a type of directive with template, styles and logic part.

Example:

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

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

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

Q. What is an Angular Module?

In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application.

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

• The imports option is used to import other dependent modules. The BrowserModule is required by default for any web based angular application
• The declarations option is used to define components in the respective module
• The bootstrap option tells Angular which Component to bootstrap in the application

Q. How to display only month in Angular?

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

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

Q. What is a bootstrapping module?

Every application has at least one Angular module, the root module that you bootstrap to launch the application is called as bootstrapping module. It is commonly known as AppModule. The default structure of AppModule generated by AngularCLI would be as follows,

/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Q. What are lifecycle hooks available in Angular?

Angular creates and renders components along with their children, checks when their data-bound properties change, and destroys them before removing them from the DOM.

Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur.

• ngOnChanges When the value of a data bound property changes, then this method is called.
• ngOnInit This is called whenever the initialization of the directive/component after Angular first displays the data-bound properties happens.
• ngDoCheck This is for the detection and to act on changes that Angular can not or wont detect on its own.
• ngAfterContentInit This is called in response after Angular projects external content into the components view.
• ngAfterContentChecked This is called in response after Angular checks the content projected into the component.
• ngAfterViewInit This is called in response after Angular initializes the components views and child views.
• ngAfterViewChecked This is called in response after Angular checks the components views and child views.
• ngOnDestroy This is the cleanup phase just before Angular destroys the directive/component.

Q. What is data binding in Angular?

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.

From the Component to the DOM
1. Interpolation {{ value }}: Adds the value of a property from the component

<li>Name: {{ user.name }}</li>
<li>Address: {{ user.address }}</li>

2. 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">

From the DOM to the Component:

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

4. 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">

Q. What is metadata in Angular?

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

1. 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!');
  }
}

2. 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;
}

3. 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
    }
}

4. 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
    }
}

Q. 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 use ngOnInit() method for Angular bindings.

Example

export class App implements OnInit{
    constructor(){
        //called first time before the ngOnInit()
    }

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

Q. What is the purpose of ngFor directive?

NgFor is a structural directive, meaning that it changes the structure of the DOM. It is used to repeat a given HTML template once for each value in an array, each time passing it the array value as context for string interpolation or binding.

@Component({
  selector: 'ngfor-app',
  template: `
      <ul>
       <li *ngFor="let person of people">
         {{ person.name }}
       </li>
      </ul>
  `
})
class NgForAppComponent {
  people: any[] = [
    { "name": "Douglas  Pace" },
    { "name": "Mcleod  Mueller" },
    { "name": "Day  Meyers" }
  ];
}

Q. 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. Lets 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>';
}

Q. What is Interpolation?

Interpolation is a special syntax that Angular converts into property binding. It is a convenient alternative to property binding. It is represented by double curly braces({{ }}). The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property.

<h3>
  {{title}}
  <img src="{{url}}" style="height:30px">
</h3>

In the example above, Angular evaluates the title and url properties and fills in the blanks, first displaying a bold application title and then a URL.

Q. What are template expressions?

A template expression produces a value similar to any Javascript expression. Angular executes the expression and assigns it to a property of a binding target; the target might be an HTML element, a component, or a directive. In the property binding, a template expression appears in quotes to the right of the = symbol as in [property]="expression". In interpolation syntax, the template expression is surrounded by double curly braces. For example, in the below interpolation, the template expression is {{username}},

<h3>{{username}}, welcome to Angular</h3>

The below javascript expressions are prohibited in template expression

• assignments (=, +=, -=, ...)
• new
• chaining expressions with ; or ,
• increment and decrement operators (++ and -)

Q. What are template statement?

A template statement responds to an event raised by a binding target such as an element, component, or directive. The template statement appear in quotes to the right of the = symbol like (event)="statement".

<button (click)="editProfile()">Edit Profile</button>

In the above expression, editProfile is a template statement. The below JavaScript syntax expressions are not allowed.

• new
• increment and decrement operators, ++ and --
• operator assignment, such as += and -=
• the bitwise operators | and &
• the template expression operators

# 6. PIPES

Q. What are pipes?

ToDo

Q. What is a parameterized pipe?

A pipe can accept any number of optional parameters to fine-tune its output. The parameterized pipe can be created by declaring the pipe name with a colon (:) and then the parameter value. If the pipe accepts multiple parameters, separate the values with colons. Lets take a birthday example with a particular format(dd/mm/yyyy)

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

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

Note: The parameter value can be any valid template expression, such as a string literal or a component property.

Q. What is a custom pipe?

A pipe is a class decorated with pipe metadata @Pipe() decorator, which you import from the core Angular library

@Pipe({name: 'myCustomPipe'})

The pipe class implements the PipeTransform() interface transform method that accepts an input value followed by optional parameters and returns the transformed value.

interface PipeTransform {
  transform(value: any, ...args: any[]): any
}

The @Pipe() decorator allows to define the pipe name that you'll use within template expressions. It must be a valid JavaScript identifier.

template: `{{someInputValue | myCustomPipe: someOtherValue}}`

Example:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'customFileSizePipe'})
export class FileSizePipe implements PipeTransform {
  transform(size: number, extension: string = 'MB'): string {
    return (size / (1024 * 1024)).toFixed(2) + extension;
  }
}

Now you can use the above pipe in template expression as below,

  template: `
    <h2>Find the size of a file</h2>
    <p>Size: {{288966 | customFileSizePipe: 'GB'}}</p>
  `

Q. What is the difference between pure and impure pipe?

A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object). An impure pipe is called for every change detection cycle no matter whether the value or parameters changes. i.e, An impure pipe is called often, as often as every keystroke or mouse-move.

impure-pipe works for every change in the component
pure-pipe works only when the component is loaded.

@Pipe({
  name: 'sort',
  pure: false // true makes it pure and false makes it impure
})
export class myPipe implements PipeTransform {

  transform(value: any, args?: any): any {
     // your logic here and return the result
  }
}

Q. 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. Lets 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)
    );
}

Q. Explain on how to use HttpClient with an example?

Below are the steps need to be followed for the usage of HttpClient.

Step 01: Import HttpClient into root module

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    ...
    HttpClientModule
  ],
  ......
  })
  export class AppModule {}

Step 02: Inject the HttpClient into the application

Lets create a userProfileService(userprofile.service.ts) as an example. It also defines get method of HttpClient

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

const userProfileUrl: string = 'assets/data/profile.json';

@Injectable()
export class UserProfileService {
  constructor(private http: HttpClient) { }

  getUserProfile() {
    return this.http.get(this.userProfileUrl);
  }
}

Step 03: Create a component for subscribing service

Lets create a component called UserProfileComponent(userprofile.component.ts) which inject UserProfileService and invokes the service method,

fetchUserProfile() {
  this.userProfileService.getUserProfile()
    .subscribe((data: User) => this.user = {
        id: data['userId'],
        name: data['firstName'],
        city:  data['city']
    });
}

Since the above service method returns an Observable which needs to be subscribed in the component.

Advantages:

• Contains testability features
• Provides typed request and response objects
• Intercept request and response
• Supports Observalbe APIs
• Supports streamlined error handling

Q. How can you read full response?

The response body may not return full response data because sometimes servers also return special headers or status code which which are important for the application workflow. In order to get full response, we should use observe option from HttpClient,

getUserResponse(): Observable<HttpResponse<User>> {
  return this.HttpClient.get<User>(
    this.userUrl, { observe: 'response' });
}

Now HttpClient.get() method returns an Observable of typed HttpResponse rather than just the JSON data.

Q. How do you perform Error handling?

If the request fails on the server or failed to reach the server due to network issues then HttpClient will return an error object instead of a successful reponse. In this case, we need to handle in the component by passing error object as a second callback to subscribe() method.

fetchUser() {
  this.userService.getProfile()
    .subscribe(
      (data: User) => this.userProfile = { ...data }, // success path
      error => this.error = error // error path
    );
}

It is always a good idea to give the user some meaningful feedback instead of displaying the raw error object returned from HttpClient.

Q. How does async pipe prevents memory leaks?

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

# 7. RXJS

Q. 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';

Q. What is an RxJS Operator?

RxJS Operators are pure functions that transform information in the observable stream that create new observables, often based on the current observable.

The operators can be broken down in multiple categories. There are creation operators that create a new observable optionally from a source, such as a promise or a value, Transformation operators will transform the data in the stream, and filtration operators will act as a gate for the observable stream.

Categories of operators:

1. Pipeable Operators [pipe()]: These are operators that can be piped to existing Observables using the pipe syntax.

class PostsComponent {

  private user: Observable<User>;

  ngOnInit() {
    this.posts = this.user.pipe(
      map(user => user.id),
      switchMap(id => 
        this.postsService.getPosts(id)
      )
    );
  }
}

2. Map Operator [map()]: The map() operator, basically, helps us to transform data using an observer. The map operator applies a given project function to each value emitted by the source Observable and emits the resulting values as an observable.

import {map} from 'rxjs/operators';

const nums = of (1, 2, 3);

const mulValues = map ((val: number) => val * 2);
const mulNums = mulValues (nums);

mulNums.subscribe(x => console.log(x));

// Outputs
// 1
// 4
// 6

3. Filter Operator [filter()]: RxJS filter() is used to filter values emitted by source Observable on the basis of given predicate. If the condition returns true, filter will emit value obtained from source Observable otherwise not.

Example: Filter values for null

this.countryName$ = this.filterDemoService.getCountry().pipe(
  filter(country => country.getCountryName() !== null),
  map(country => country.getCountryName()),
  catchError(err => {
	  console.error(err);
	  return of("");
  })
); 

4. Concat Operator [concat()]: Creates an output Observable which sequentially emits all values from given Observable and then moves on to the next.

Example: Concatenate a timer counting from 0 to 3 with a synchronous sequence from 1 to 10

import { concat, interval, range } from 'rxjs';
import { take } from 'rxjs/operators';

const timer = interval(1000).pipe(take(4));
const sequence = range(1, 10);
const result = concat(timer, sequence);
result.subscribe(x => console.log(x));

// results in:
// 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3 -immediate-> 1 ... 10

5. FlatMap Operator [flatMap()] or mergeMap Operator [mergeMap()]: flatMap() is an alias for mergeMap(). By using flatMap we can transform our event stream (the keypress events on the text field) into our response stream (the search results from the HTTP request).

Example: app/services/search.service.ts

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

@Injectable()
export class SearchService {

  constructor(private http: Http) {}

  search(term: string) {
    return this.http
            .get('https://api.spotify.com/v1/search?q=' + term + '&type=artist')
            .map((response) => response.json())
  }
}

app/app.component.ts

import { Component } from '@angular/core';
import { FormControl,
    FormGroup,
    FormBuilder } from '@angular/forms';
import { SearchService } from './services/search.service';
import 'rxjs/Rx';

@Component({
    selector: 'app-root',
    template: `
        <form [formGroup]="coolForm"><input formControlName="search" placeholder="Search Spotify artist"></form>

        <div *ngFor="let artist of result">
          {{artist.name}}
        </div>
    `
})
export class AppComponent {
    searchField: FormControl;
    coolForm: FormGroup;

    constructor(private searchService:SearchService, private fb:FormBuilder) {
        this.searchField = new FormControl();
        this.coolForm = fb.group({search: this.searchField});

        this.searchField.valueChanges
          .debounceTime(400)
            .flatMap(term => this.searchService.search(term))
            .subscribe((result) => {
                this.result = result.artists.items
            });
    }
}

6. SwitchMap Operator [switchMap()]: The switchMap() operator switches from one stream to another, unsubscribing from the previous observable and returning a new observable.

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { SearchService } from './services/search.service';
import 'rxjs/Rx';

@Component({
    selector: 'app-root',
    template: `
        <form [formGroup]="coolForm"><input formControlName="search" placeholder="Search Spotify artist"></form>

        <div *ngFor="let artist of result">
          {{artist.name}}
        </div>
    `
})
export class AppComponent {
    searchField: FormControl;
    coolForm: FormGroup;

    constructor(private searchService:SearchService, private fb:FormBuilder) {
        this.searchField = new FormControl();
        this.coolForm = fb.group({search: this.searchField});

        this.searchField.valueChanges
          .debounceTime(400)
            .switchMap(term => this.searchService.search(term))
            .subscribe((result) => {
                this.result = result.artists.items
            });
    }
}

7. Tap Operator [tap()]: The do() operator was renamed to tap() in RxJS v5.5.x as part of the upgrade to lettable operators to avoid a confict with the reserved word do (part of the do-while loop).

RxJS Tap operator uses to perform a side effect for every emission on the source Observable but returns an Observable that is identical to the source.

getProducts(): Observable<any[]> {
  return this.http.get<any[]>(apiUrl)
    .pipe(
      tap(product => console.log('fetched products')),
      catchError(this.handleError('getProducts', []))
    );
}

8. Catch Operator [catch()]: The catch() operator was renamed in RxJS v5.5.x to catchError(). The catchError() operator to receive any error notifications that are emitted in the observable stream.

getProduct(id: number): Observable<any> {
  const url = `${apiUrl}/${id}`;
  return this.http.get<any>(url).pipe(
    tap(_ => console.log(`fetched product id=${id}`)),
    catchError(this.handleError<any>(`getProduct id=${id}`))
  );
}

9. forkJoin Operator [forkJoin()]: The forkJoin() operator is similar to the Promise.all() method in that it starts (forks) multiple observers at once and then joins the final values from each observable when all observables complete. It is important to note that if any of the input observables never complete, then the forkJoin() will never complete.

Example: Multiple http calls in parallel using forkJoin()

Observable.forkJoin(
    call1(params),
    call2(params),
    call3(params)
).subscribe((responses) => {
    // responses[0] -> response of call1
    // responses[1] -> response of call2
    // responses[2] -> response of call3
})

10. retry Operator [retry()]: retry() operator returns source Observable with the exception of an error. When source Observable calls error then retry operator resubscribe it for the maximum of given number of time. If Observable starts emitting elements and suppose at any point it calls error before completion, then retry operator will resubscribe the source Observable and starts emitting from start again.

return this.http
           .get(this.url)
           .retry(5);

11. StartWith Operator [startWith()]:

import { startWith } from 'rxjs/operators';
import { of } from 'rxjs';

//emit (1,2,3)
const source = of(1, 2, 3);
//start with 0
const example = source.pipe(startWith(0));
//output: 0,1,2,3
const subscribe = example.subscribe(val => console.log(val));

12. Of Operator [of()]:

import { of } from 'rxjs';
//emits any number of provided values in sequence
const source = of(1, 2, 3, 4, 5);
//output: 1,2,3,4,5
const subscribe = source.subscribe(val => console.log(val));

13. take Operator [take()]: take() an operator returns the first N values observed and complete stream. It is also another filteration operator.

import { interval } from ‘rxjs’;
import { take } from ‘rxjs/operators’;

const intervalCount = interval(1000);
const takeFive = intervalCount.pipe(take(5));
takeFive.subscribe(x => console.log(x));

Output

0, 1, 2, 3, 4

The above example will take only the first five elements after every 5 seconds with the 1-second interval for five seconds.

Q. What is rxjs subject in Angular?

An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.

A Subject observable is used to immediately notify subscribers of updated values emitted by it. It does not keep track of old values, i.e. if a Subject observable first emitted a value and was then later subscribed to, then the subscriber will not get that value. A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.

import { Subject } from 'rxjs';

const mySubject = new Rx.Subject();

mySubject.next(1); // Data can be pushed into the subject using its next method

const subscription1 = mySubject.subscribe(x => {
  console.log('From subscription 1:', x);
});

mySubject.next(2);

const subscription2 = mySubject.subscribe(x => {
  console.log('From subscription 2:', x);
});

mySubject.next(3);

subscription1.unsubscribe();

mySubject.next(4);

Output

From subscription 1: 2
From subscription 1: 3
From subscription 2: 3
From subscription 2: 4

Q. What is RxJS BehaviorSubject, ReplaySubject and AsyncSubject in angular?

a.) BehaviorSubject: It has the characteristic that it stores the current value. This means that we can always directly get the last emitted value from the BehaviorSubject. We can either get the value by accessing the .value property on the BehaviorSubject or we can subscribe to it.

import * as Rx from "rxjs";

const subject = new Rx.BehaviorSubject();

// subscriber 1
subject.subscribe((data) => {
    console.log('Subscriber A: ', data);
});

subject.next(Math.random());
subject.next(Math.random());

// subscriber 2
subject.subscribe((data) => {
    console.log('Subscriber B: ', data);
});

subject.next(Math.random());

console.log(subject.value)

// output
// Subscriber A: 0.24957144215097515
// Subscriber A: 0.8751123892486292
// Subscriber B: 0.8751123892486292
// Subscriber A: 0.1901322109907977
// Subscriber B: 0.1901322109907977
// 0.1901322109907977

b.) ReplaySubject: It can send old values to new subscribers. It however has the extra characteristic that it can record a part of the observable execution and therefore store multiple old values and replay them to new subscribers.

When creating the ReplaySubject we can specify how much values want to store and for how long want to store them.

import * as Rx from "rxjs";

const subject = new Rx.ReplaySubject(2);

// subscriber 1
subject.subscribe((data) => {
    console.log('Subscriber A:', data);
});

subject.next(Math.random())
subject.next(Math.random())
subject.next(Math.random())

// subscriber 2
subject.subscribe((data) => {
    console.log('Subscriber B:', data);
});

subject.next(Math.random());

// Subscriber A: 0.3541746356538569
// Subscriber A: 0.12137498878080955
// Subscriber A: 0.531935186034298
// Subscriber B: 0.12137498878080955
// Subscriber B: 0.531935186034298
// Subscriber A: 0.6664809293975393
// Subscriber B: 0.6664809293975393

c.) AsyncSubject: It is a Subject variant where only the last value of the Observable execution is sent to its subscribers, and only when the execution completes.

import * as Rx from "rxjs";

const subject = new Rx.AsyncSubject();

// subscriber 1
subject.subscribe((data) => {
    console.log('Subscriber A:', data);
});

subject.next(Math.random())
subject.next(Math.random())
subject.next(Math.random())

// subscriber 2
subject.subscribe((data) => {
    console.log('Subscriber B:', data);
});

subject.next(Math.random());
subject.complete();

// Subscriber A: 0.4447275989704571
// Subscriber B: 0.4447275989704571

Q. What is difference between BehaviorSubject and Observable?

Behavior Subject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable.

The unique features of a behavior subject are:

• Behavior subject needs an initial value as it must always return a value on subscription even if it hasn’t received a next()
• Upon subscription, it returns the last value of the subject. A regular observable only triggers when it receives a onnext
• At any point you can retrieve the last value of the subject in a non-observable code using the getValue() method.

The unique features of a subject compared to a observable are:

• It is a observer in addition to being a observable so you can also send values to a subject in addition to subscribing to it.
• In addition you can get a observable from behavior subject using the asobservable() method on behaviour subject.
• Observable is a Generic, and Behavior subject is technically a sub-type of Observable because behavior subject is a observable with specific qualities.

// Behavior Subject

// a is a initial value. if there is a subscription 
// after this, it would get "a" value immediately
let bSubject = new BehaviorSubject("a"); 

bSubject.next("b");

bSubject.subscribe((value) => {
  console.log("Subscription got", value); // Subscription got b, 
                                          // ^ This would not happen 
                                          // for a generic observable 
                                          // or generic subject by default
});

bSubject.next("c"); // Subscription got c
bSubject.next("d"); // Subscription got d

Example 2: With regular subject

// Regular Subject

let subject = new Subject(); 

subject.next("b");

subject.subscribe((value) => {
  console.log("Subscription got", value); // Subscription wont get 
                                          // anything at this point
});

subject.next("c"); // Subscription got c
subject.next("d"); // Subscription got d

Q. What is the difference between Subject and BehaviorSubject?

Subject:

Subject does not return the current value on Subscription. It triggers only on .next(value) call and return/output the value

var subject = new Rx.Subject();

subject.next(1); //Subjects will not output this value

subject.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

subject.next(2);
subject.next(3);

Output:

observerA: 2
observerB: 2
observerA: 3
observerB: 3

BehaviorSubject:

A BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject does not hold a value. BehaviourSubject will return the initial value or the current value on Subscription.

var subject = new Rx.BehaviorSubject(0);  // 0 is the initial value

subject.subscribe({
  next: (v) => console.log('observerA: ' + v)  // output initial value, then new values on `next` triggers
});

subject.next(1);  // output new value 1 for 'observer A'
subject.next(2);  // output new value 2 for 'observer A', current value 2 for 'Observer B' on subscription

subject.subscribe({
  next: (v) => console.log('observerB: ' + v)  // output current value 2, then new values on `next` triggers
});

subject.next(3);

Output:

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

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

// 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
myObservable.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

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

import { Observable } from 'rxjs';

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

Q. What is an observer?

Observer is an interface for a consumer of push-based notifications delivered by an Observable. It has below structure,

interface Observer<T> {
  closed?: boolean;
  next: (value: T) => void;
  error: (err: any) => void;
  complete: () => void;
}

A handler that implements the Observer interface for receiving observable notifications will be passed as a parameter for observable as below,

myObservable.subscribe(myObserver);

Note: If you do not supply a handler for a notification type, the observer ignores notifications of that type.

Q. What is multicasting?

Multi-casting is the practice of broadcasting to a list of multiple subscribers in a single execution. Lets demonstrate the multi-casting feature,

var source = Rx.Observable.from([1, 2, 3]);
var subject = new Rx.Subject();
var multicasted = source.multicast(subject);

// These are, under the hood, `subject.subscribe({...})`:
multicasted.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
multicasted.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

// This is, under the hood, `s

Q. How do you perform error handling in observables?

We can handle errors by specifying an error callback on the observer instead of relying on try/catch which are ineffective in asynchronous environment. For example, you can define error callback as below,

myObservable.subscribe({
  next(num) { console.log('Next num: ' + num)},
  error(err) { console.log('Received an errror: ' + err)}
});

Q. What is the short hand notation for subscribe method?

The subscribe() method can accept callback function definitions in line, for next, error, and complete handlers is known as short hand notation or Subscribe method with positional arguments. For example, you can define subscribe method as below,

myObservable.subscribe(
  x => console.log('Observer got a next value: ' + x),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);

Q. What are the utility functions provided by RxJS?

The RxJS library also provides below utility functions for creating and working with observables.

1. Converting existing code for async operations into observables
2. Iterating through the values in a stream
3. Mapping values to different types
4. Filtering streams
5. Composing multiple streams

Q. What are observable creation functions?

RxJS provides creation functions for the process of creating observables from things such as promises, events, timers and Ajax requests. Let us explain each of them with an example,

1. Create an observable from a promise

import { from } from 'rxjs'; // from function
const data = from(fetch('/api/endpoint')); //Created from Promise
data.subscribe({
  next(response) { console.log(response); },
  error(err) { console.error('Error: ' + err); },
  complete() { console.log('Completed'); }
});

2. Create an observable that creates an AJAX request

import { ajax } from 'rxjs/ajax'; // ajax function
const apiData = ajax('/api/data'); // Created from AJAX request
// Subscribe to create the request
apiData.subscribe(res => console.log(res.status, res.response));

3. Create an observable from a counter

import { interval } from 'rxjs'; // interval function
const secondsCounter = interval(1000); // Created from Counter value
secondsCounter.subscribe(n =>
  console.log(`Counter value: ${n}`));

4. Create an observable from an event

import { fromEvent } from 'rxjs';
const el = document.getElementById('custom-element');
const mouseMoves = fromEvent(el, 'mousemove');
const subscription = mouseMoves.subscribe((e: MouseEvent) => {
  console.log(`Coordnitaes of mouse pointer: ${e.clientX} * ${e.clientY}`);
  });

Q. What will happen if you do not supply handler for observer?

Normally an observer object can define any combination of next, error and complete notification type handlers. If you do not supply a handler for a notification type, the observer just ignores notifications of that type.

Q. Explain the difference between Promise and Observable in Angular?

Promises:

• return a single value
• not cancellable
• more readable code with try/catch and async/await

Observables:

• work with multiple values over time
• cancellable
• support map, filter, reduce and similar operators
• use Reactive Extensions (RxJS)
• an array whose items arrive asynchronously over time

Q. How do you provide configuration inheritance?

Angular Compiler supports configuration inheritance through extends in the tsconfig.json on angularCompilerOptions. i.e,The configuration from the base file (example, tsconfig.base.json) are loaded first, then overridden by those in the inheriting config file.

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "experimentalDecorators": true,
    ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": true,
    ...
  }
}

Q. How do you specify angular template compiler options?

The angular template compiler options are specified as members of the angularCompilerOptions object in the tsconfig.json file. These options will be specified adjecent to typescript compiler options.

{
  "compilerOptions": {
    "experimentalDecorators": true,
              ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": true,
              ...
  }
}

Q. How do you enable binding expression validation?

You can enable binding expression validation explicitly by adding the compiler option fullTemplateTypeCheck in the "angularCompilerOptions" of the project tsconfig.json. It produces error messages when a type error is detected in a template binding expression. For example, consider the following component:

@Component({
  selector: 'my-component',
  template: '{{user.contacts.email}}'
})
class MyComponent {
  user?: User;
}

This will produce the following error:

my.component.ts.MyComponent.html(1,1): : Property 'contacts' does not exist on type 'User'. Did you mean 'contact'?

Q. What is the purpose of any type cast function?

You can disable binding expression type checking using $any() type cast function(by surrounding the expression). In the following example, the error Property contacts does not exist is suppressed by casting user to the any type.

  template: '{{$any(user).contacts.email}}'

The $any() cast function also works with this to allow access to undeclared members of the component.

  template: '{{$any(this).contacts.email}}'

Q. What is Non null type assertion operator?

You can use the non-null type assertion operator to suppress the Object is possibly 'undefined' error. In the following example, the user and contact properties are always set together, implying that contact is always non-null if user is non-null. The error is suppressed in the example by using contact!.email.

@Component({
  selector: 'my-component',
  template: '<span *ngIf="user"> {{user.name}} contacted through {{contact!.email}} </span>'
})
class MyComponent {
  user?: User;
  contact?: Contact;

  setData(user: User, contact: Contact) {
    this.user = user;
    this.contact = contact;
  }
}

Q. What is type narrowing?

The expression used in an ngIf directive is used to narrow type unions in the Angular template compiler similar to if expression in typescript. So *ngIf allows the typeScript compiler to infer that the data used in the binding expression will never be undefined.

@Component({
  selector: 'my-component',
  template: '<span *ngIf="user"> {{user.contact.email}} </span>'
})
class MyComponent {
  user?: User;
}

Q. How do you describe various dependencies in angular application?

The dependencies section of package.json with in an angular application can be divided as follow,

1. Angular packages Angular core and optional modules; their package names begin @angular.
2. Support packages Third-party libraries that must be present for Angular apps to run.
3. Polyfill packages Polyfills plug gaps in a browser JavaScript implementation.

Q. What is zone?

A Zone is an execution context that persists across async tasks. Angular relies on zone.js to run Angular change detection processes when native JavaScript operations raise events

Q. What is the purpose of common module?

The commonly-needed services, pipes, and directives provided by @angular/common module. Apart from these HttpClientModule is available under @angular/common/http.

Q. What is codelyzer?

Codelyzer provides set of tslint rules for static code analysis of Angular TypeScript projects. ou can run the static code analyzer over web apps, NativeScript, Ionic etc. Angular CLI has support for this and it can be use as below,

ng new codelyzer
ng lint

# 11. ANGULAR ANIMATIONS

Q. What is State function?

Angular state() function is used to define different states to call at the end of each transition. This function takes two arguments a unique name like open or closed and a style() function. For example, you can write a open state function

state('open', style({
  height: '300px',
  opacity: 0.5,
  backgroundColor: 'blue'
})),

Q. What is Style function?

The style function is used to define a set of styles to associate with a given state name. You need to use it along with state() function to set CSS style attributes. For example, in the close state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of green.

state('close', style({
  height: '100px',
  opacity: 0.8,
  backgroundColor: 'green'
})),

Note: The style attributes must be in camelCase

Q. What is the purpose of animate function?

Angular Animations are a powerful way to implement sophisticated and compelling animations for your Angular single page web application.

import { Component, OnInit, Input } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
selector: 'app-animate',
templateUrl: `<div [@changeState]="currentState" class="myblock mx-auto"></div>`,
styleUrls: `.myblock {
    background-color: green;
    width: 300px;
    height: 250px;
    border-radius: 5px;
    margin: 5rem;
    }`,
animations: [
    trigger('changeState', [
    state('state1', style({
        backgroundColor: 'green',
        transform: 'scale(1)'
    })),
    state('state2', style({
        backgroundColor: 'red',
        transform: 'scale(1.5)'
    })),
    transition('*=>state1', animate('300ms')),
    transition('*=>state2', animate('2000ms'))
    ])
]
})
export class AnimateComponent implements OnInit {

    @Input() currentState;

    constructor() { }

    ngOnInit() {
    }
}

Q. What is transition function?

The animation transition function is used to specify the changes that occur between one state and another over a period of time. It accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts an animate() function. Lets take an example state transition from open to closed with an half second transition between states.

transition('open => closed', [
  animate('500ms')
]),

Q. How to inject the dynamic script in angular?

Using DomSanitizer we can inject the dynamic Html, Style, Script, Url.

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'my-app',
  template: `
      <div [innerHtml]="htmlSnippet"></div>
  `,
})
export class App {
      constructor(protected sanitizer: DomSanitizer) {}
      htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>");
  }

Q. What selector force a style down through the child component tree into all the child component views?

Component styles normally apply only to the HTML in the components own template.

Use the ::ng-deep shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The ::ng-deep combinator works to any depth of nested components, and it applies to both the view children and content children of the component.

Example:

The following example targets all <h3> elements, from the host element down through this component to all of its child elements in the DOM.

parent.component.html:

Parent content.

<app-child></app-child>

parent.component.css:

::ng-deep h3 {
  font-style: italic;
}

child.component.html:

<h3>Child title</h3>
Child content.

# 9. SERVICES AND DI

Q. What are Angular Services?

Angular services are singleton objects which get instantiated only once during the lifetime of an application. It contains method that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application.

Benefits:

An Angular service is a stateless object and provides some very useful functions. These functions can be invoked from any component of Angular, like Controllers, Directives, etc. This helps in dividing the web application into small, different logical units which can be reused.

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.

Q. What is a service worker and its role in Angular?

A service worker is a script that runs in the web browser and manages caching for an application. Starting from 5.0.0 version, Angular ships with a service worker implementation. Angular service worker is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content. Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (also known as a PWA).

Below are the list of design goals of Angular service workers,

• It caches an application just like installing a native application
• A running application continues to run with the same version of all files without any incompatible files
• When you refresh the application, it loads the latest fully cached version
• When changes are published then it immediately updates in the background
• Service workers saves the bandwidth by downloading the resources only when they changed.

Syntax:

ng add @angular/pwa --project *project-name*

The above command completes the following actions:

• Adds the @angular/service-worker package to your project.
• Enables service worker build support in the CLI.
• Imports and registers the service worker in the app module.
• Updates the index.html file:
  • Includes a link to add the manifest.json file.
  • Adds meta tags for theme-color.
• Installs icon files to support the installed Progressive Web App (PWA).
• Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

Q. How to set time for caching in service-worker?

ngsw-config.json:

{
    ...
    "dataGroups": [{
            "name": "api-freshness",
            "urls": [
                "/timeline"
            ],
            "cacheConfig": {
                "strategy": "freshness",
                "maxSize": 100,
                "maxAge": "3d",
                "timeout": "10s"
            }
        },
        {
            "name": "api-performance",
            "urls": [
                "/favorites"
            ],
            "cacheConfig": {
                "strategy": "performance",
                "maxSize": 100,
                "maxAge": "3d"
            }
        }
    ]
}

Q. What are the types of cache in browsers?

There are two types of cache in the browser: browser-managed cache and application-managed cache (service worker).

• Browser-managed caches are a temporary storage location on computer for files downloaded by browser to display websites. Files that are cached locally include any documents that make up a website, such as HTML files, CSS style sheets, JavaScript scripts, as well as graphic images and other multimedia content. This cache is managed automatically by the browser and is not available offline.

• Application-managed caches are created using the Cache API independent of the browser-managed caches. This API is available to applications (via window.caches) and the service worker. Application- managed caches hold the same kinds of assets as a browser cache but are accessible offline (e.g. by the service worker to enable offline support).This cache is managed by developers who implement scripts that use the Cache API to explicitly update items in named cache objects.

Q. What is dependency injection in Angular?

Dependency Injection (DI) allows a class receive dependencies from another class. Most of the time in Angular, dependency injection is done by injecting a service class into a component or module class.

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

@Injectable()
export class PopcornService {

  constructor() {
    console.log("Popcorn has been injected!");
  }

  cookPopcorn(qty) {
    console.log(qty, "bags of popcorn cooked!");
  }
}

AppComponent.ts:

import { Component } from '@angular/core';
import { PopcornService } from './popcorn.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PopcornService]
})
export class AppComponent {
  constructor(private popcorn: PopcornService) {}

  cookIt(qty) {
    this.popcorn.cookPopcorn(qty);
  }
}

Q. What is Angular Language Service?

The Angular Language Service is a way to get completions, errors, hints, and navigation inside your Angular templates whether they are external in an HTML file or embedded in annotations/decorators in a string. It has the ability to autodetect that you are opening an Angular file, reads your tsconfig.json file, finds all the templates you have in your application, and then provides all the language services.

Q. How do you install angular language service in the project?

You can install Angular Language Service in your project with the following npm command

npm install --save-dev @angular/language-service

After that add the following to the "compilerOptions" section of your project tsconfig.json

"plugins": [
    {"name": "@angular/language-service"}
]

Note: The completion and diagnostic services works for .ts files only. You need to use custom plugins for supporting HTML files.

Q. What are the limitations with web workers?

1. Some environments or platforms(like @angular/platform-server) used in Server-side Rendering, do not support Web Workers. In this case we need to provide a fallback mechanism to perform the computations to work in this environments.
2. Running Angular in web worker using @angular/platform-webworker is not yet supported in Angular CLI.

Q. What is Angular CLI Builder?

In Angular8, the CLI Builder API is stable and available to developers who want to customize the Angular CLI by adding or modifying commands. For example, you could supply a builder to perform an entirely new task, or to change which third-party tool is used by an existing command.

Q. What is a builder?

A builder function is a function that uses the Architect API to perform a complex process such as "build" or "test". The builder code is defined in an npm package. For example, BrowserBuilder runs a webpack build for a browser target and KarmaBuilder starts the Karma server and runs a webpack build for unit tests.

Q. How do you invoke a builder?

The Angular CLI command ng run is used to invoke a builder with a specific target configuration. The workspace configuration file, angular.json, contains default configurations for built-in builders.

Q. How do you create app shell in Angular?

An App shell is a way to render a portion of your application via a route at build time. This is useful to first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript. You can achieve this using Angular CLI which generates an app shell for running server-side of your app.

ng generate appShell [options] (or)
ng g appShell [options]

Q. What are the case types in Angular?

Angular uses capitalization conventions to distinguish the names of various types. Angular follows the list of the below case types.

• camelCase Symbols, properties, methods, pipe names, non-component directive selectors, constants uses lowercase on the first letter of the item. For example, "selectedUser"
• UpperCamelCase (or PascalCase) Class names, including classes that define components, interfaces, NgModules, directives, and pipes uses uppercase on the first letter of the item.
• dash-case (or "kebab-case") The descriptive part of file names, component selectors uses dashes between the words. For example, "app-user-list".
• UPPER_UNDERSCORE_CASE All constants uses capital letters connected with underscores. For example, "NUMBER_OF_USERS".

Q. What are the class decorators in Angular?

A class decorator is a decorator that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type The following list of decorators comes under class decorators,

1. @Component()
2. @Directive()
3. @Pipe()
4. @Injectable()
5. @NgModule()

Q. What are class field decorators?

The class field decorators are the statements declared immediately before a field in a class definition that defines the type of that field. Some of the examples are: @input() and @output(),

@Input() myProperty;
@Output() myEvent = new EventEmitter();

Q. What is declarable in Angular?

Declarable is a class type that you can add to the declarations list of an NgModule. The class types such as components, directives, and pipes comes can be declared in the module.

Q. What are the restrictions on declarable classes?

Below classes should not be declared,

1. A class that is already declared in another NgModule
2. Ngmodule classes
3. Service classes
4. Helper classes

Q. What is a DI token?

A DI token is a lookup token associated with a dependency provider in dependency injection system. The injector maintains an internal token-provider map that it references when asked for a dependency and the DI token is the key to the map. Lets take example of DI Token usage,

const BASE_URL = new InjectionToken<string>('BaseUrl');
const injector =
    Injector.create({providers: [{provide: BASE_URL, useValue: 'http://some-domain.com'}]});
const url = injector.get(BASE_URL);

Q. What is Angular DSL?

A domain-specific language (DSL) is a computer language specialized to a particular application domain. Angular has its own Domain Specific Language (DSL) which allows us to write Angular specific html-like syntax on top of normal html. It has its own compiler that compiles this syntax to html that the browser can understand. This DSL is defined in NgModules such as animations, forms, and routing and navigation. Basically you will see 3 main syntax in Angular DSL.

1. (): Used for Output and DOM events.
2. []: Used for Input and specific DOM element attributes.
3. * : Structural directives(*ngFor or *ngIf) will affect/change the DOM structure.

Q. What is Bazel tool?

Bazel is a powerful build tool developed and massively used by Google and it can keep track of the dependencies between different packages and build targets. In Angular8, you can build your CLI application with Bazel.

Note: The Angular framework itself is built with Bazel.

Advantages:

Below are the list of key advantages of Bazel tool,

1. It creates the possibility of building your back-ends and front-ends with the same tool
2. The incremental build and tests
3. It creates the possibility to have remote builds and cache on a build farm.

Q. How do you use Bazel with Angular CLI?

The @angular/bazel package provides a builder that allows Angular CLI to use Bazel as the build tool.

1. Use in an existing applciation: Add @angular/bazel using CLI

ng add @angular/bazel

2. Use in a new application: Install the package and create the application with collection option

npm install -g @angular/bazel
ng new --collection=@angular/bazel

When you use ng build and ng serve commands, Bazel is used behind the scenes and outputs the results in dist/bin folder.

Q. How do you run Bazel directly?

Sometimes you may want to bypass the Angular CLI builder and run Bazel directly using Bazel CLI. You can install it globally using @bazel/bazel npm package. i.e, Bazel CLI is available under @bazel/bazel package. After you can apply the below common commands,

bazel build [targets] // Compile the default output artifacts of the given targets.
bazel test [targets] // Run the tests with *_test targets found in the pattern.
bazel run [target]: Compile the program represented by target and then run it.

# 10. ANGULAR TEMPLATE

Q. What is Ng-Content/Content Projection?

The <ng-content></ng-content> tag as a placeholder for dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content.

They are used to create configurable components. This means the components can be configured depending on the needs of its user. This is well known as Content Projection. Components that are used in published libraries make use of <ng-content> to make themselves configurable.

Example

<!-- project-content.html -->
<div class="heading">
  <h1>Welcome to Content Projection</h1>
</div>
<div class="body">
  <div>Some Content...</div>
</div>
<div class="footer">
  <ng-content></ng-content>
</div>

<project-content>
  <div>This is custom footer...</div>
</project-content>

Q. How can I select an element in a component template?

We can get a handle to the DOM element via ElementRef by injecting it into component constructor:

constructor(myElement: ElementRef) { ... }

Q. What is Redux and how does it relate to an Angular app?

Redux is a way to manage application state and improve maintainability of asynchronicity in application by providing a single source of truth for the application state, and a unidirectional flow of data change in the application. ngrx/store is one implementation of Redux principles.

# 8. ROUTING

Q. How routing works in Angular?

When a user navigates to a page, Angular Router performs the following steps in order:

1. It reads the browser URL the user wants to navigate to
2. It applies a URL redirect (if one is defined)
3. It figures out which router state corresponds to the URL
4. It runs the guards that are defined in the router state
5. It resolves the required data for the router state
6. It activates the Angular components to display the page
7. It manages navigation and repeats the steps above when a new page is requested.

To accomplish its tasks, Angular Router introduces the following terms and concepts:

• router service: the global Angular Router service in our application
• router configuration: definition of all possible router states our application can be in
• router state: the state of the router at some point in time, expressed as a tree of activated route snapshots
• activated route snapshot: provides access to the URL, parameters, and data for a router state node
• guard: script that runs when a route is loaded, activated or deactivated
• resolver: script that fetches data before the requested page is activated
• router outlet: location in the DOM where Angular Router can place activated components.

Q. What is the purpose of base href tag?

The routing application should add element to the index.html as the first child in the tag inorder to indicate how to compose navigation URLs. If app folder is the application root then you can set the href value as below

<base href="/">

Q. What is router outlet?

The RouterOutlet is a directive from the router library and it acts as a placeholder that marks the spot in the template where the router should display the components for that outlet. Router outlet is used like a component,

<router-outlet></router-outlet>
<!-- Routed components go here -->

Q. How to create multiple router-outlets?

<router-outlet></router-outlet>  
<router-outlet  name="sidebar"></router-outlet>  

{
   path: "",
   component: SidebarComponent,
   outlet: "sidebar"
}

Q. What is routerLink?

The RouterLink is a directive on the anchor tags give the router control over those elements. Since the navigation paths are fixed, you can assign string values to router-link directive as below,

<h1>Angular Router</h1>
<nav>
  <a routerLink="/home" >Home</a>
  <a routerLink="/user" >Users</a>
</nav>
<router-outlet></router-outlet>

Q. What are active router links?

RouterLinkActive is a directive that toggles css classes for active RouterLink bindings based on the current RouterState. i.e, the Router will add CSS classes when this link is active and and remove when the link is inactive. For example, you can add them to RouterLinks as below

<h1>Angular Router</h1>
<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/user" routerLinkActive="active">Users</a>
</nav>
<router-outlet></router-outlet>

Q. What is router state?

RouterState is a tree of activated routes. Every node in this tree knows about the "consumed" URL segments, the extracted parameters, and the resolved data. You can access the current RouterState from anywhere in the application using the Router service and the routerState property.

@Component({templateUrl:'template.html'})
class MyComponent {
  constructor(router: Router) {
    const state: RouterState = router.routerState;
    const root: ActivatedRoute = state.root;
    const child = root.firstChild;
    const id: Observable<string> = child.params.map(p => p.id);
    //...
  }
}

Q. What are Router Events?

During each navigation, the Router emits navigation events through the Router.events property allowing you to track the lifecycle of the route. The sequence of router events is as below,

• NavigationStart
• RouteConfigLoadStart
• RouteConfigLoadEnd
• RoutesRecognized
• GuardsCheckStart
• ChildActivationStart
• ActivationStart
• GuardsCheckEnd
• ResolveStart
• ResolveEnd
• ActivationEnd
• ChildActivationEnd
• NavigationEnd
• NavigationCancel
• NavigationError
• Scroll

Q. What is Activated Route?

ActivatedRoute contains the information about a route associated with a component loaded in an outlet. It can also be used to traverse the router state tree. The ActivatedRoute will be injected as a router service to access the information. In the below example, you can access route path and parameters,

@Component({...})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: Observable<string> = route.params.pipe(map(p => p.id));
    const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
    // route.data includes both `data` and `resolve`
    const user = route.data.pipe(map(d => d.user));
  }
}

Q. How do you define Angular Routes?

The Angular Router enables navigation from one view to the next as users perform application tasks.

const appRoutes: Routes = [
  { 
    path: 'home/:id', 
    component: HomeComponent },
  {
    path: 'users',
    component: UsersListComponent,
    data: { title: 'Users List' }
  },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { 
    path: '**', 
    component: PageNotFoundComponent 
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

Q. What is the purpose of Wildcard route?

If the URL does not match any predefined routes then it causes the router to throw an error and crash the app. In this case, you can use wildcard route. A wildcard route has a path consisting of two asterisks to match every URL. For example, you can define PageNotFoundComponent for wildcard route as below

{ path: '**', component: PageNotFoundComponent }

Q. Explain local reference variables, @ViewChild() and @ContentChild()?

The @ViewChild() and @ViewChildren() decorators in Angular provide a way to access and manipulate DOM elements, directives and components. @ViewChild() is used to query one element from the DOM and @ViewChildren() for multiple elements.

If you want to access following inside the Parent Component, use @ViewChild() decorator of Angular.

1. Child Component
2. Directive
3. DOM Element

ViewChild returns the first element that matches the selector. Example: @ViewChild()

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-message',
    template: `
    <h2>{{message}}</h2>
`
})
export class MessageComponent {
    @Input() message: string;
}

We are using MessageComponent inside AppComponent as shown in below listing:

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div>
      <h1>Messages</h1>
      <app-message [message]='message'></app-message>
    </div>
`
})
export class AppComponent implements OnInit {
    message: any;
    ngOnInit() {
        this.message = 'Hello World !';
    }
}

Here MessageComponent is located inside template of AppComponent, so it can be accessed as ViewChild.

export class AppComponent implements OnInit, AfterViewInit {
    message: any;
    @ViewChild(MessageComponent) messageViewChild: MessageComponent;
  
    ngAfterViewInit() {
        console.log(this.messageViewChild);
    }
    ngOnInit() {
        this.message = 'Hello World !';
    }
}

• @ContentChild()

Example: MessageContainerComponent

import { Component } from '@angular/core';
@Component({
    selector: 'app-messagecontainer',
    template: `
    <div>
      <h3>{{greetMessage}}</h3>
      <ng-content select="app-message"></ng-content>
    </div>
  `
})
export class MessageContainerComponent {
    greetMessage = 'Ignite UI Rocks!';
}

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
    <div>
      <app-messagecontainer>
      <app-message [message]='message'></app-message>
      </app-messagecontainer>
    </div>
`
})
export class AppComponent implements OnInit {
    message: any;
    ngOnInit() {
        this.message = 'Hello World !';
    }
}

Since, MessageComponnet is projected and being used inside template of MessageContainerComponent, it can be used as ContentChild as shown in the below listing:

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { MessageComponent } from './message.component';
  
@Component({
    selector: 'app-messagecontainer',
    template: `
    <div>
        <h3>{{greetMessage}}</h3>
        <ng-content select="app-message"></ng-content>
    </div>
    `
})
export class MessageContainerComponent implements AfterContentInit {
    greetMessage = 'Ignite UI Rocks!';
    @ContentChild(MessageComponent) MessageComponnetContentChild: MessageComponent;
    ngAfterContentInit() {
        console.log(this.MessageComponnetContentChild);
    }
}

Q. Can you explain the difference between ActivatedRoute and RouterState?

RouterState is an interface which represents the state of the router as a tree of activated routes. Every node of this tree knows about the "consumed" URL segments, the extracted parameters, and the resolved data.

RouterState Interface looks like:

interface RouterState extends Tree {
  snapshot: RouterStateSnapshot
  toString(): string
}

ActivatedRoute interface provides access to information about a route associated with a component that is loaded in an outlet. Use to traverse the RouterState tree and extract information from nodes.

ActivatedRoute Interface looks like:

interface ActivatedRoute {
  snapshot: ActivatedRouteSnapshot
  url: Observable<UrlSegment[]>
  params: Observable
  queryParams: Observable
  fragment: Observable
  data: Observable
  outlet: string
  component: Type | string | null
  routeConfig: Route | null
  root: ActivatedRoute
  parent: ActivatedRoute | null
  firstChild: ActivatedRoute | null
  children: ActivatedRoute[]
  pathFromRoot: ActivatedRoute[]
  paramMap: Observable
  queryParamMap: Observable
  toString(): string
}

Q. How to make sure that single instance will be used in an entire application?

There are two ways to make a service a singleton in Angular:

• Declare root for the value of the @Injectable() providedIn property
• Include the service in the AppModule or in a module that is only imported by the AppModule

Q. How do you reference the host of a component?

We can get the host element reference using

class MyComponent {
  constructor(private elRef:ElementRef) {
    console.log(this.elRef.nativeElement);
  }
}

We can also subscribe to the focus event

class MyComponent {
  @HostBinding() tabindex = 0;
  @HostListener('focus', ['$event'])
  onFocus(event) {
    console.log(event);
  }
}

Q. What is the difference between RouterModule.forRoot() and RouterModule.forChild()?

• RouterModule.forRoot(ROUTES): forRoot creates a module that contains all the directives, the given routes, and the router service itself.
• RouterModule.forChild(ROUTES): forChild creates a module that contains all the directives and the given routes, but does not include the router service.

Example: RouterModule.forRoot(ROUTES)

// ...
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(ROUTES)],
  // ...
})
export class AppModule {}

Example: RouterModule.forChild(ROUTES)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

export const ROUTES: Routes = [];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(ROUTES)],
  // ...
})
export class ChildModule {}

• forRoot(): service register to entire application
• forChild(): service register to particular child component

Q. Why would you use renderer methods instead of using native element methods? What is difference between Renderer and ElementRef in angular?

The Renderer is a class that is a partial abstraction over the DOM. Using the Renderer for manipulating the DOM does not break server-side rendering or Web Workers (where direct access to the DOM would break).

ElementRef is a class that can hold a reference to a DOM element. This is again an abstraction to not break in environments where the browsers DOM is not actually available.

There are other ways to acquire an ElementRef instance like @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChildren(). In this case ElementRef is a reference to the matching element(s) in the template or children.

Q. How would you control size of an element on resize of the window in a component?

<div (window:resize)="onResize($event)"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    '(window:resize)': 'onResize($event)'
  }
})
export class AppComponent{
   onResize(event){
     event.target.innerWidth; // window width
   }
}

//OR
@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth;
}

Q. How to cache an observable data?

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable, ReplaySubject } from 'rxjs';

@Injectable()
export class CachedService {
  data$: Observable<Response> = this.dataSubject.asObservable();

  private dataSubject = new ReplaySubject<Response>(1);

  constructor(private http: Http) { }

  fetch() {
    this.http.get(...).subscribe(res => this.dataSubject.next(res));
  }
}

This will make an HTTP call when the fetch method is called, and any subscribers to service.data$ ($ as a suffix basically represents a stream of values) will get the response from the ReplaySubject. As it replays earlier values, any subscribers who join after the HTTP call resolves will still get the previous response.

If we want to trigger an update, we can just call service.fetch() to kick off a new HTTP call and all subscribers will be updated once the new response arrives.

@Component({ ... })
export class SomeComponent implements OnInit {

  constructor(private service: CachedService) { }

  ngOnInit() {
    this.service.fetch();
    this.service.data$.subscribe(...);
  }
}

Q. What do you understand by a template variable?

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.
Example:

<input type="text" #name>
<button (click)="show(name)">Show</button>

show(name: HTMLInputElement){
    console.log(name.value);
}

Q. What is shadow DOM? How is it helping Angular to perform better?

Shadow DOM basically allows group of DOM implementation to be hidden inside a single element and encapsulate styles to the element. Whenever we create a component, Angular puts its template into a shadowRoot, which is the Shadow DOM of that particular component.

Example:

@Component({
  templateUrl: 'card.html',
  styles: [`
    .card {
      height: 70px;
      width: 100px;
    }
  `],
  encapsulation: ViewEncapsulation.Native
  // encapsulation: ViewEncapsulation.None
  // encapsulation: ViewEncapsulation.Emulated is default 
})

• ViewEncapsulation.None: - No Shadow DOM at all. Therefore, also no style encapsulation.
• ViewEncapsulation.Emulated: - No Shadow DOM but style encapsulation emulation.
• ViewEncapsulation.Native: - Native Shadow DOM enabled.

Q. How do you use a JavaScript third party lib in an Angular App?

Example: Adding underscore.js library to a Angular Project.

Step 1: Create a new project using Angular CLI

ng new learning

Step 2: Install the package

npm install --save underscore

Step 3: Import the library into Angular (TypeScript)

npm install --save @types/underscore

Step 4: Import type declaration into Angular app

import * as _ from 'underscore';

export class AppComponent {
  constructor() {
    const myArray: number[] = [9, 1, 5];
    const lastItem: number = _.last(myArray); //Using underscore
    console.log(lastItem); //5
  }
}

Q. Can we create two Components with the same name in two different .ts files?

• No

Q. What are the difference between @Inject() and @Injectable()?

The @Injectable() decorator aims to actually set some metadata about which dependencies to inject into the constructor of the associated class. It is a class decorator that does not require parameters. Without this decorator no dependency will be injected.

@Injectable()
export class SomeService {
  constructor(private http:Http) {
  }
}

The @Inject decorator must be used at the level of constructor parameters to specify metadata regarding elements to inject. Without it, the type of parameters is used (obj:SomeType is equivalent to @Inject(SomeType) obj).

@Injectable()
export class SomeService {
  constructor(@Inject(Http) private http:Http, @Inject('sometoken') obj) {
  }
}

Q. What are Zones? What is Change Detection? What would be a good use for NgZone service?

The most common use of NgZone service is to optimize performance when starting a work consisting of one or more asynchronous tasks that do not require UI updates or error handling to be handled by Angular.

Zone.js is an execution context that helps developers intercept and keep track of async operations. Zone works on the concept of associating each operation with a zone. Each zone can fork and create a child zone with a different context, no limits. Inside a zone, async operations are captured using different APIs, so that the developer can decide what to do with the interceptions.

Zone and NgZone are used to automatically trigger change detection as a result of async operations. But since change detection is a separate mechanism it can successfully work without Zone and NgZone.

Q. What is auxiliary routes in angular?

Angular supports the concept of auxiliary routes, which allow to set up and navigate multiple independent routes in a single app. Each component has one primary route and zero or more auxiliary outlets. Auxiliary outlets must have unique name within a component.

To define the auxiliary route we must first add a named router outlet where contents for the auxiliary route are to be rendered.
Example:

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

@Component({
  selector: 'app',
  template: `
    <nav>
      <a [routerLink]="['/component-one']">Component One</a>
      <a [routerLink]="['/component-two']">Component Two</a>
      <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
    </nav>

    <div style="color: green; margin-top: 1rem;">Outlet:</div>
    <div style="border: 2px solid green; padding: 1rem;">
      <router-outlet></router-outlet>
    </div>

    <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
    <div style="border: 2px solid blue; padding: 1rem;">
      <router-outlet name="sidebar"></router-outlet>
    </div>
  `
})
export class AppComponent { }

Next we must define the link to the auxiliary route for the application to navigate and render the contents.

<a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">
  Component Aux
</a>

Each auxiliary route is an independent route which can have:

• Its own child routes
• Its own auxiliary routes
• Its own route-params
• Its own history stack

Q. How do you get a reference to a child component?

ViewChild/ViewChildren or ContentChild/ContentChildren

Q. How do you listen for events in a component?

HostListener or via elementRef.nativeElement

Q. How do you force a change detection cycle?

changeDetectorRef.markForCheck or changeDetectorRef.detectChanges()

Q. How would you get a reference to a parent component?

Inject it in the constructor.

Q. What does forwardRef do?

Allows to refer to references which are not yet defined.

For instance, forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.
Example:

class Door {
  lock: Lock;

  // Door attempts to inject Lock, despite it not being defined yet.
  // forwardRef makes this possible.
  constructor(@Inject(forwardRef(() => Lock)) lock: Lock) { this.lock = lock; }
}

// Only at this point Lock is defined.
class Lock {}

const injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);
const door = injector.get(Door);
expect(door instanceof Door).toBeTruthy();
expect(door.lock instanceof Lock).toBeTruthy();

Q. What are entryComponents?

An entry component is any component that Angular loads imperatively. There are two main kinds of entry components:

• The bootstrapped root component.
• A component you specify in a route definition.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})