Angular interview questions – part 1

August 30, 2018

1 What is typescript?

It is a strict syntactical superset of JavaScript, and adds optionaltype-checking along with the latest ECMAScript features.

2 What is two way data binding in angular?

Two-way Binding. Data binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.

Binding

 

3 Types of bindings in angular ?

1 Interpolation -eg- <h1>{{user.name}}</h1> //interpolation is in braces
2 Two way binding – <input [(ngModel)]=”user.name”/>
3 One way binding – <h1 [innerText]=”user.name”></h1> //Bindings like inner text
4 Event Binding – <button ng-click=”userData()”>Send</h1> //Binding events like click

 

4 What are authGuards?

With AuthGuards/RouterGuards we can prevent users from accessing areas that they’re not allowed to access.Or prevent navigating away.
There are four kinds of guards.You have to import it from the @angular/router module
CanActivate
Checks to see if a user can visit a route.

CanActivateChild
Checks to see if a user can visit a routes children.

CanDeactivate
Checks to see if a user can exit a route.

Resolve
Performs route data retrieval before route activation.

CanLoad
Checks to see if a user can route to a module that lazy loaded.

 

5 The difference between Constructor and ngOnInit in Angular ?What is dependancy injection

The Constructor is a default method of the class that is executed when we create instance of a class
ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component. ngOnInit is invoked after the component is initialized and after ngOnChanges. This is invoked only once.

Dependency injection is a technique whereby one object (or static method) supplies the dependencies of another object.
import {Component, OnInit} from ‘@angular/core’;
https://angular.io/guide/dependency-injection

6 What is angular Lazy loading and when to use it?

Lazy loading technique is used in Angular to load JavaScript components asynchronously when a specific route is activated. This helps in providing increased performance during the initial load, especially if you have complex routing
Lazy loading

 

7 How to share data between components?

Data is shared between components in using four method
1 Shared Service
2 Parent – Child
3 Child -parent
4 Event emitter- on events like button click
https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

 

8 What are services?when to use them?

Angular services are substitutable objects that are wired together using dependency injection (DI).Components shouldn’t fetch or save data directly and they certainly shouldn’t knowingly present fake data. They should focus on presenting data and delegate data access to a service.Angular services are used to share data between components/during http operations.

9 What are pipes in angular?

A pipe takes in data as input and transforms it to a desired output.For example for currency conversion or for changing date format.There are built in pipes and we can create custom pipes of our own too
eg – <p>The hero’s birthday is {{ birthday | date:”MM/dd/yy” }} </p>

10 Which are angular lifecycle hooks and which one runs first constructor or ngInit?

Angular life cycle involves creating a component,rendering the component html,creating child components and rendering them, checking the changes to data bindings.Angular provides lifecycle hookes which are used during the various phases of lifecycle

1     Constructor Function – Called when a new instance of the component class is created.It is initailly called. Dependancy                                                       injector analyzes the the parameters passed to the constructor.

2     ngOnChanges  –   Check for the changes in  input data – bound properties.It is invoked every time when there is a change to                                      input  bound properties.This is the second method in angular lifecycle.

3     ngOnInit –        ngOnInit is invoked after the component is initialized and after ngOnChanges. This is invoked only once.

4     ngDoCheck  – ngDoCheck is the  interface is used to detect changes manually which the angular change detection have                                        overlooked. ngDoCheck lifecycle hook  check for object mutation and notify using markForCheck                                                 method.See the articles in this website for immutables,parent-child and change detection strategies .This is                                     run immediately after ngOnChanges() and ngOnInit().       

 

11 Where to inject services in to component?

Constructor

12 What are components?

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.

13 What are http interceptors?

Http interceptors are used to intercept request/response or both of every http request.They can be used to add a token to the http header.

14 What are decorators?

The decorator pattern is a design pattern that allows behavior to be added to an individual object, dynamically, without affecting the behavior of other objects from the same class.A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaratio
decorators

15 What does @NgModule do in angular?

An NgModule is a class marked by the @NgModule decorator. @NgModule takes a metadata object that describes how to compile a component’s template and how to create an injector at runtime. It identifies the module’s own components, directives, and pipes, making some of them public, through the exports property, so that external components can use them. @NgModule can also add service providers to the application dependency injectors.

16 What does @Injectable do in angular?

A marker metadata that marks a class as available to Injector for creation.For example if we want to make a class injectable, we need to use @injectable

17 What are observables in angular?compare promise and observable ?

Both Promises and Observables help us do asynchronous operations. A Promise can only handle one event, Observables are for streams of events over time. Promises can’t be cancelled once they are pending.promises are not lazy where are observable are lazy.Observable run an http request only when we subscribe to it but promises run the http request even with out then.Observables can be cancceled,retried….
Observables

 

19 What does @Component decorator do angular?

Angular @component decorator takesa an object with the metadata for th component like template,css,selector etc

20 What is RxJS?

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

RxJS

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *