Prepare Interview

Mock Exams

Make Homepage

Bookmark this page

Subscribe Email Address

Angular Interview Questions and Answers

Related differences

Related differences

Angular vs ReactAngularJS vs NodeJSAngularJS vs Angular
Jquery vs AngularJS

Ques 16. What is metadata?

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

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

    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

      }

    }

Is it helpful? Add Comment View Comments
 

Ques 17. 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

  2. Generating Components, Directives & Services: ng generate/g 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

Is it helpful? Add Comment View Comments
 

Ques 18. What is the difference between constructor and ngOnInit in Angular?

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor.
ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component.
Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work". So you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to "start" - it's where/when components' bindings are resolved.

export class App implements OnInit{

  constructor(private myService: MyService){

  //called first time before the ngOnInit()

  }

  ngOnInit(){

  //called after the constructor and called after the first ngOnChanges() //e.g. http call...

  }

}

Is it helpful? Add Comment View Comments
 

Ques 19. What is a service?

A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components.

Let's create a repoService which can be used across components,

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

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

@Injectable({ // The Injectable decorator is required for dependency injection to work

  // providedIn option registers the service with a specific NgModule

providedIn: 'root', // This declares the service with the root app (AppModule)

})

export class RepoService{

  constructor(private http: Http){ }

  fetchAll(){

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

  }

}

The above service uses Http service as a dependency.

Is it helpful? Add Comment View Comments
 

Ques 20. What is dependency injection in Angular?

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

Is it helpful? Add Comment View Comments
 

Most helpful rated by users:

©2024 WithoutBook