Some IMP angular interview questions and answers

1)Structure Of Angular Project?
Ans:

2) How do you deploy Angular apps?
Ans : 
Basic deployment to a remote server

For the simplest deployment, create a production build and copy the output directory to a web server.

1)Start with the production build:
ng build --prod

2)Copy everything within the output folder (dist/ by default) to a folder on the server.


3)Configure the server to redirect requests for missing files to index.html.

3) Types of pre-defined or built-in pipes in Angular 6.
Ans : Pipes are used to format the data before displaying in the View. A pipe is used by using |. This symbol is called a Pipe Operator.
Types of pre-defined or built-in pipes in Angular 6.

1. Lowercase
2. Uppercase
3. Titlecase
4. Slice
5. Json Pipe
6. Number Pipe
7. Percent Pipe
8. Currency Pipe
9. Date Pipe

4) Angular — Promise vs Observable

Ans: 

In Angular, we can use either Promise or Observable for handling asynchronous data. Both get and post method of Http and HttpClient return Observable and it can be converted into Promise using toPromise() method. So, what’s the difference when they both are dealing with asynchronous data.

What actually the difference is?

Promise emits a single value while Observable emits multiple values. So, while handling a HTTP request, Promise can manage a single response for the same request, but what if there are multiple responses to the same request, then we have to use Observable. Yes, Observable can handle multiple responses for the same request.
Let’s implement this with an example.

Promise

1

const promise = new Promise((data) =>




2

{ data(1);




3

  data(2);




4

  data(3); })




5

.then(element => console.log(‘Promise ‘ + element));

Output

1

Promise 1

 Observable

1

const observable = new Observable((data) => {




2

data.next(1);




3

data.next(2);




4

data.next(3);




5

}).subscribe(element => console.log('Observable ' + element));

Output

1

Observable 1




2

Observable 2




3

Observable 3

So, in the above code snippet, I have created promise and observable of Promise and Observable type respectively. But, promise returns the very first value and ignore the remaining values whereas Observable return all the value and print 1, 2, 3 in the console.

Promise is not lazy while Observable is lazy. Observable is lazy in nature and do not return any value until we subscribe.

home.component.ts (Observable)

1

getMenu() {




2

this.homeService.getFoodItem();




3

}




4

}

In above example we are not subscribing the observable, so we do not receive the data and even there would be a no network call for this service.

home.component.ts (Observable)

1

getMenu() {




2

this.homeService.getFoodItem().subscribe((data  => {




3

this.foodItem = data;




4

}),




5

error => console.log(error));




6

}




7

}

Here, we have subscribed our Observable, so it will simply return the data. But Promise returns the value regardless of then() method.

home.component.ts (Promise)

1

getMenu() {




2

this.homeService.getFoodItem()




3

.then((data) => {




4

this.foodItem = data;




5

});




6

}

Observable is cancellable in nature by invoking unsubscribe() method, but Promise is not cancellable in nature.

Hope this is helpful and gives you a basic understanding of how Promise differs from Observable. Please feel free to provide your suggestions 🙂

5) what is directive in angular.

Ans: Directives in Angular is a js class, which is declared as @directive. We have 3 directives in Angular. The directives are listed below −

Component Directives

These form the main class having details of how the component should be processed, instantiated and used at runtime.

Structural Directives

A structure directive basically deals with manipulating the dom elements. Structural directives have a * sign before the directive. For example, *ngIf and *ngFor.

Attribute Directives

Attribute directives deal with changing the look and behavior of the dom element. You can create your own directives as shown below.

6) Difference between Constructor and ngOnInit

Ans:

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses. Angular or better DI analyzes 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 like

new MyClass(someArg);

ngOnInit is a life cycle hook called by Angular2 to indicate that Angular is done creating the component.

We have to import OnInit in order to use like this (actually implementing OnInit is not mandatory but considered good practice):

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

then to use the method of OnInit we have to implement in the class like this.

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

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

Implement this interface to execute custom initialization logic after your directive’s data-bound properties have been initialized. ngOnInit is called right after the directive’s data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

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.

7) Global Events in Angular

Ans: