Angular Interview Questions

• 1 What is Angular v8?

  Angular is one of the foremost app-designing Javascript framework for creating sophisticated single page apps.

  The latest stable version of Angular is version 8 released on May 23rd, 2019. Angular 8 support the advance features including CLI
  (Command Line Interface), Angular material, Typescript 3.4, Web Workers, Lazy Loading, StackBlitz integrated IDE and Native Script for building native mobile apps, Firebase Integration, Preview Ivy and many more.

• 2 What is the key difference between Angular v1.x and Angular v2-v8?

  To avoid confusion, I will use the name AngularJs for the version Angular v1.x and Angular for the versions v2-v8.

  Angular is a completely rewritten framework. Basically, it is not an upgrade of AngularJs because the architecture is totally changed. We are going to compare both on the different parameters.

  Architectural

  AngularJs : AngularJs architecture is based on the MVC (Model-View-Controller) design.

  • Model- The model expresses the app behavior and manages its data related logic.

  • View- The view generates the output based on the data logic in the model.

  • Controller- The controller accepts the external inputs and convert it to commands and sends to the model for desired output.

  Angular: In Angular framework, $scope and controllers replaced by directives and components. Components are basically directives with a template which are responsible for dealing with the application logic on the page (A directive is basically a function which executes whenever the angular compiler finds it in the DOM. There are two types of directives available in Angular.

  These are structural directives and attribute directives). I will explain the directives further.

  Language

   

  AngularJS: AngularJS is mainly programmed in JavaScript.

   

  Angular: Angular uses the Typescript language developed by Microsoft. Typescript is a superset of ECMAScript 6 (ES6). So it consists of powerful features including type checking, object-oriented, type declarations, and the benefits of ES6, like iterators and lambdas etc.

  Expression

  AngularJS: You just have to remember the correct ng directive in order to bind any image/property or an event with AngulaJS.

  Angular: In Angular binding you just have to remember "[]" for property binding and "()" for event binding.

  Mobile Application Support

  AngularJS: AngularJS in not compatible with Mobile applications. AngularJS was not built with mobile support in mind so it doesn't feature mobile support.

  Angular:  Angular (v2-v8) features mobile support.

• 3 What is AOT (Ahead-of-Time)?

  An angular application mainly consists of components and templates which can
  not be understood by the browser directly. To make it compatible with the browser
  The angular application requires a compilation process to compile the application before
  they can run on the browser. AOT compiler converts the application's code containing
  HTML and typescript into efficient JavaScript code while building the process. The
  browser platform downloads and runs the JavaScript code. This also improves the app
  run time performance by taking consideration of JavaScript VM's feature.
  Advantage of using AOT Compiler:
  ● Faster rendering with AOT as the browser gets the per-compiled
  the application.
  version of
  ● Smaller Angular framework download size.
  ● There is no need to download the Angular compiler as the app is already
  compiled.
  ● AOT compiler detects the template error earlier. So there will be less
  chances of app breakdown.
  ● Better security. There will be no templates to read and no risky client-side HTML

  after compilation so there will be less changes for injection attacks.
  include the --aot option with the ng build or ng serve command, for AOT compilation:
  ng build --aot

  ng serve –aot

• 4 How to declare components in Angular?

  Components are the basic building block in an angular application. It contains a
  selector, template style and other properties which are used to specify the metadata in
  order to process the component. Angular has an extremely well defined component life
  cycle. Components are simply directives associated with a direct template. A
  component will always belong to NgModule in order to be used by other components or
  applications.

  @component ({selector: 'great', template: 'hello {{name}}!'})
  Class greet{
  Name: string = 'world';
  }
  To generate a component please find the cli command below,
  ng generate component component-name

• 5 Why Do we need to use ngOninit, if we already have Constructor?

  If you are a beginner, then working with ngOninit and Constructor will might be
  confusing for you.
  ● A constructor is a method used to initialize class members. It is a feature of
  object-oriented design concept.
  ● When angular is done with initializing the component then ngOnInit() is called.
  We need to import OnInit from @angular/core in order to use ngOnInit();

• 6 What is Lazy Loading in Angular?

  Lazy loading is a design pattern, which helps us to download the web pages in small
  bundles instead of downloading everything in a big bundle. Lazy loading helps to keep
  the bundle size smaller, which helps in decreasing the page loading time.

  
  {path: ‘user’, loadChildren: ‘./users/user.module#UserModule’}

  
  In the latest version of Angular (v8), the dynamic import is introduced in the router
  configuration. It means we need to use the import statement for lazy loading the module.

  {path: ‘user’, loadChildren: () => import(‘./users/user.module’).then(m =>
  m.UserModule)};

• 7 What is the key difference between Lazy Loading and Eager Loading in Angular?

  ● In Lazy Loading routing configuration, related child objects are not loaded with its
  parent object. They will be loaded once it is requested by the application. We can
  use it by loadChildren property in router configuration.
  ● In Eager Loading concept, related child objects are loaded with its parent object
  automatically. All the data is retrieved in a single
  query, which can be cached to improve the application performance.

• 8 What is RouterOutlet in Angular?

  RouterOutlet is an Angular directive that works as a placeholder in order to load the
  different components dynamically based on the current browser's URL. Any component,
  which is matched by the routing configuration will be rendered as a sibling of the Router
  outlet.
  <router-outlet></router-outlet>
  We can use the router-outlet directive in the navigation section and the activated component
  will be rendered inside the router-outlet to load its content.
  <router-outlet name='left'></router-outlet>
  <router-outlet name='right'></router-outlet>

• 9 What are the modern browser supported by Angular(v2-v8)?

  ● Safari●
  ● IE Mobile
  ● Google Chrome
  ● Firefox
  ● Edge
  ● IE for versions 9-11

• 10 What is the key difference between Promise and Observable Angular?

  Promise and Observable, both are used for handling the HTTP asynchronous request in
  Angular. Both the methods, get and post of HTTP return observable and we can convert
  it to promise using the toPromise() method.
  ● A promise can handle a single event only when an asynchronous operation is
  successful or fail. Whereas, observable is able to handle HTTP asynchronous
  requests in a more powerful way.
  ● A promise emits only single value. We can’t call resolve twice and get different
  values, once a promise is resolved.. Whereas, observable can emit multiple
  values.By calling next() we can subscribe to the new values.
  ● A promise executes at the moment it is defined. But an observable can only be
  executed by calling subscribe().
  ● A promise can not be canceled. But an observable can be canceled by calling
  unsubscribe().

• 11 Explain pipes in Angular?

  Pipes in Angular are used to format data before rendering the view. Pipes were called filters in AngularJS. Pipe operator “|” is used to transform the data into the desired format. It usually takes string, integer, date and array as input separated with pipe
  operator “|” to be converted into the desired format and render the same in the browser.

  Types of built-in pipes in Angular,
  ● Lowercase (​ Text | lowercase​ )
  ● Uppercase (​ Text | uppercase​ )
  ● Titlecase (​ Text | titlecase​ )
  ● Slice (​ Text | slice:3​ )
  ● Json Pipe (​ Text | json​ )

  ● Number Pipe (​ value | number:'1.2.2'​ )
  ● Percent Pipe (value | percent)
  ● Currency Pipe (​ value | currency:'GBP'​ )
  ● Date Pipe (date | date:'short')

• 12 .Explain route guards in Angular?

  Route guards are used to restrict the accessibility of a specifically requested route. It tells the router whether or not it should allow navigation for that particularly requested route. The class implementing guard interface returns boolean values true or false. There are different types of guards in Angular given below, CanActivate: ​It checks if a user is allowed to visit a specific route

  CanActivateChild:​ It checks if a user is allowed to visit a specific children route

  CanDeactivate:​ It checks if a user can exit a specific route

   Resolve:​ Before activating the route, it performs route data retrieval

  CanLoad:​ It check to see if a user can route to a lazy loaded module 

• 13 .Explain decorators in Angular and how do you create a decorator?

  Decorators are design patterns invoke with a prefixed @ symbol used in separate modification or decoration of class without making any changes in the source code. This is also referred to as a function used to modify a class, method, property and parameters of any method. 

  @readonly

  class Person {    

     ​name: string;  

    ​isAdmin: boolean;    

    ​constructor(name:string, admin: boolean) {    

      ​this.name = name;         ​this.isAdmin = admin;

      ​} } 

  As you can see the class decorator @readonly passed a reference to the constructor function.  
   

• 14 Explain the safe navigation operator in Angular?

  The safe navigation operator is also known as Elvis Operator is generally used to prevent the error while accessing the property of a null object. Find below the example of elvis operator. 
  {{user?.name}} 
  In case the user object doesn't exist, it will not throw any error in the console. It will show the output, only if the name is not null or undefined. 

• 15 Explain @Input and @Output functionality in Angular?

  @Input and @Output is a mechanism to send/receive data from one component to another component. As the name suggests, @Input is used to receive the data, whereas @Output used to send the data with the help of EventEmitter Objects.

  Just take the example of example.component.ts

  @Component({ 

   selector: 'hello',

    template: ` <h3 (click)="onClick.emit('Yes')"> ...</h3> `

   })

   export class ExampleComponent {  

   @Input() myContacts: string

     @Output() onClick = new EventEmitter()

   }

• 16 Explain the concept of Data Binding in Angular?

  Data binding is the mechanism to communicate between the component's typescript code and UI template (View) which the user sees. It just keeps the changes in the component variables and Template in sync. 
   
  There are two types of Data Binding concepts available. 
  ● One-Way data binding 
  The flow of change in one-way data binding is unidirectional. It means only the template is in sync with component's variable. Please take a look at the example below, 

  @Component({

    selector: 'app-root',

    template: `  <div><p>{{name}} works!! <app-todo [item]='name'></app-todo></p></div>`,

    style: [] })

  export class AppComponent { 

   name = 'app';   changeName() {       this.name = 'Angular app' 

   }}

  The component variable name is bound with the template. If the value of the name is changed by the changeName method, then the DOM will be updated and it'll reflect the new value.  
  ● Two-way data binding 
  In Two-way data binding, both the component variable and template are sync with each other. the flow of change is bidirectional. This can be acheived by using the 
  Banana-inside-box "[()]" concept. With the help of this, component variable will be able to change the data in template and template will also be able to change the data bound class property. 

  @Component({

    selector: 'app-root',

    template: `<div><p><input [(ngModel)]="msg" /><b>{{msg}}</b></p></div> `, 

   style: []

   })

  export class AppComponent {  

  msg = 'My Message'   changeMsg()

  {     this.msg = 'Message Changed'

  }}

  Two-way data binding is mostly used in forms while dealing with user inputs. in the above example if value in input box is changed then, the class variable will be updated and if component class variable is changed then the template HTML will be updated with the latest value.

• 17 What is Formgroup and FormControl in Angular?

  FormGroup is used to define forms in Angular. It is one of the three fundamental building blocks used to define Angular forms. FormGroup tracks the value and valid state of form control. A FormGroup creates an object with each control name as object key and the value of each child form control as the object values.  Entire FormGroup becomes invalid if any one of the form controls is not valid. Please take a look at the example below, 

  => example.component.html  
  <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()"> 
    Name: <input formControlName="name"  placeholder="Enter Name"> 
    Age: <input formControlName="age"  placeholder="Enter Age"> 
    <button type="submit">Submit</button>  
  </form>  
  => example.component.ts 
  userForm = new FormGroup({ 
       name: new FormControl(), 
       age: new FormControl('20') 
  }); 
  onFormSubmit(): void { 
      console.log('Name:' + this.userForm.get('name').value); 
  }  
   

• 18 What is Dependency injection in Angular?

  Dependencies are generally an object or a service which a class needs to perform its function. 
  Dependency injection (DI) is a core concept and an important application design pattern in Angular. It is an ability to add the functionality of components at runtime from external sources rather than creating them itself. It allows a class to receive dependencies from another class.  
  => example.service.ts 
  import { Injectable } from '@angular/core'; 
  @Injectable() 
  export class ExampleService { 
    getExample() { 
      console.log("Dependency Injection Example"); 
    }} 
  => app.component.ts 
  import { Component } from '@angular/core'; 
  import { PopcornService } from './popcorn.service'; 
  @Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [ExampleService] 
  }) 
  export class AppComponent { 
    constructor(private example: ExampleService) {} 
    getIt() { 
      this.example.getExample(); 
    }} 

• 19 19.Explain the use of .subscribe() in Angular?

  This method comes from Rxjs library in Angular. This is a way used by angular components to retrieve the data that is sent to an observable. This is similar to subscribing to a newsletter. After subscribing to the newsletter, they will send it to your home, every time there is a new newsletter published. So this way, every time there is 
  new data, the method inside subscribe gets called. This process will continue till the time you unsubscribe it. 
  let subscription = magazineStore.getMagazines().subscribe( (newMagazine)=>{      console.log('newMagazine',newMagazine);

  });  
  In case you want to unsubscribe it,  
  subscription.unsubscribe(); 
   

• 20 .What is the key difference between attribute directive and structural directive in Angular?

  Attribute Directive: 
  ● Attribute directives are used as a characteristic of element that changes the behaviour or appearance of an DOM element, component or any other directive.  ● Multiple attribute directives are allowed on one host element. ● Example: ngClass and ngStyle are Angular's built-in attribute directives 
  Structural Directive: 
  ● We can use Structural Directive to modify the DOM structure by adding and removing manipulating DOM elements. It is responsible for HTML layout.  ● Multiple structural directives are not allowed on one host element.  ● Example: *ngIf and *ngFor