Top 50 Angular 4 Interview Questions and Answers 2020 May

on

I am going to share basic Angular 4 Interview Questions with Answers. It's really helpful for Angular 4 fresher and Angular 4 experienced candidate for getting the right Angular 4 job.

Top 50 Angular 4 Interview Questions and Answers 2020 May


Describe about the Directive and Directive Types?

Directive used to make DOM level changes which works dynamically.

  • Attribute Directive
  • Component Directive
  • Structural Directive

Difference between constructor and ngOnInit?

Constructor works as default method in TypeScript classes which is used for the initialization.

ngOnInit method is specific to Angular, It is used to define bindingls in Angular.

export class AppTest implements OnInit{

constructor(){

//called intially before the ngOnInit()

}

ngOnInit(){

//This called after the constructor and after the first ngOnChanges()

}

}

Difference between pure and impure pipe?

Whenever Angular detects changes in the value/parameters which passed to pipe , pure pipe will get called. Whereas impure pipe get called for every change on detection , it does not matter whether the value/parameters changes. i.e On Every keystroke/ mouse-move impure pipe often get called.

Difference between scan() vs reduce() in AngularJS?

Scan – This applied with function for each item emitted which is perform by Observable, sequentially, and emit on each success value.

Reduce – This works same as Scan except it emit only final value.

How async pipe prevent memory leeks?

Whenever any component gets destroyed/unmounted , async pipe works automatically to avoid memory leaks.

How DI(dependency injection) works in Angular?

Dependency injection (DI), is a design pattern which makes code to write loosely coupled. Angular has its own DI framework for resolving dependencies.

So application will have service which will work based on other service through using DI which makes code loosely coupled which help to reduce dependencies.

How Lifecycle hooks works in order?

ngOnChanges()

ngOnInit()

ngAfterViewInit()

ngOnDestroy()

How the TypeScript code is converted into JavaScript code, brief the process?

This is known as Transpiling. TypeScript code used to write in Angular application but internally it gets transpiled into equivalent JavaScript.

How to use *ngFor Loop directive?

This works on collection of data and NgFor is a directive that iterates on collection object.

List out the router events?

On each navigation, Router emits navigate through the router. Below events is to track the life cycle of the route.

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

what angular.json file represent in Angular CLI?

Angular CLI works to generate workspace directory in AngularJS.

What are the building blocks of Angular application?

Angular application is made by using the below.

  • Blocks
  • Component
  • Services
  • Orders
  • Template
  • DataNemo
  • Pro injection
  • Lane

What are the built-in validators in AngularJS list out few of them?

Below is the few validators which are built-in .

  • min
  • max
  • required
  • type=”number” OR type=”email”

What are the class field decorators?

This statements declared immediately before all the field which has define in the class. Below is the example for the same.

@Input() myPriority;

@Output() event1 = new EventEmitter();

What are the data types define in TypeScript?

  • String
  • Any
  • Void
  • Boolean
  • Number

What are the different ng commands in angular?

  • Ng new
  • Ng generate
  • Ng build
  • Ng serve
  • Ng test

What are the event listener directives that attach to HTML element?

ng(mousedown,mouseup,mouseenter,mouseleave,mousemove,mouseover,keydown,keyup,keypress,change,click,dbl-click)

What are the lead components of Angular?

Answer: Angular contains the below components –

  • Modules
  • Component
  • Services
  • Templates
  • Metadata

What are the router imports?

Angular Router represents a particular component view for a given URL which is not part of Angular Core. This is available in @angular/router library to import required router components. Below is the snippet for the same.

import { RouterModule, Routes } from ‘@angular/router’;

What are the Structural and Attribute directives Structural in Angular JS?

To Add or Remove Items from DOM below are the one

*ngIf,*ngFor,*ngSwitch

Below are the attributes which appears changes on element

ngClass,ngStyle

What are the various styling form in Angular which has to adds in CSS classes by ngModel?

ngModel adds below CSS classes to allow styling and control.

  • ng-pristine
  • ng-dirty
  • ng- valid
  • ng- invalid

What are the ways to create custom directive in angular?

  • Element directive
  • CSS directive
  • Attribute directive

What are types of compilation in Angular?

Angular has two types to compile your application,

  • JIT – Just-in-Time
  • AOT – Ahead-of-Time

What Is @inputs In Angular?

It comes under Angular 2 which allows to pass data into controller and template through html and custom properties. This allows to reuse components and display the same for each instance on the rendering.

What Is @ngmodule in angular?

It’s a Angular 2 module. It’s a decorator function which allows users to mark something like module/component and it enables additional data.

What is a digest cycle in Angular?

Digest cycle is the code that runs at an interval which can be set or simply works fast as default.

What is Angular Router and use of this?

Angular router use to navigate from one to another or next view based on application perform tasks. This model works as brower’s application navigation.

What is Angular Universal?

This is server-side rendering module which recently integrated with Angular CLI. This is available under @angular/platform-server package.

What is AOT in angular?

AOT – Ahead-of-Time (AOT) is one of the type of compilation that compiles angular app while building time.

Below is the ng build or ng serve command

ng build –aot

ng serve –aot

what is binding and describe the types?

This is a process to get the data combine which always used to work for each flow. We have two types for this-

  • Data binding
  • Event binding

What is CLI and how to use for angular?

Angular CLI is acronym for Command Line Interface and used to build angular apps using in the form of nodejs style modules like you need to install using npm command.

What is data Binding in angular and how it works?

Data binding used to communicate between template and component and it worked whenever change event will occur. It has two types, below are the types.

  • One-way
  • Two-way

What is lean component mean in Angular?

The lean component used only to display the data.

What is mean of reliability injection in angular?

Whenever there is dependencies on the component like one component depends on another, this particular function is turned on and off when the functionality is turned on.

What is ngFor directive?

ngFor directive in Angular used to display each item of the list in the template. Below is the snippet for the same.

*ngFor=”item of obj”>

{{ item }}

What is One-way binding in AngularJS?

One way binding is used for one-time expression and represents as double colon – “::”.

What is required to validate the form inputs?

Form inputs used to validate with cNg-Validate and such inputs like barcodes, mobile numbers, email.

What is RxJS and use of this?

RxJS is a library and used to composing asynchronous and callback-based code in a functional,HttpClient consume and produce RxJS Observables.

Below is the snippet for the same.

import { catchError, retry } from ‘rxjs/operators’;

import { Observable, throwError } from ‘rxjs’;

What is Singleton pattern and how it works in AngularJS?

This design pattern restrict to create a object again and will pass the same object which is available. In AngularJs dependency injection used to enable this pattern , once this is enabled then class create object.

What is State function?

This function used to define different different states to call on each transition. It takes two arguments unique name and style().

Below is the example for the same.

state(‘closed’, style({

height: ‘600px’,

opacity: 0.9,

backgroundColor: ‘green’

})),

What is the (ngModel) used for in AngularJS?

This used for Two-way data binding

What is the Difference between ng-class and ng-style?

The CSS class loading is possible in ng-class , Whereas we can set the CSS style in ng-style we can set the CSS style.

What is the purpose of common module?

Common module contains services , pipes , HttpClientModule , and directive which provided by @angular/common module. HTTP The commonly-needed services, pipes.

What is the syntax of decorator in Angular?

Below is the basic syntax of decorator –

@() with optional parameters

What is the use of base href tag?

This tag required to routing application which should add element in index.html as the first child to indicate to compose other url of application. Below is the snippet to set the href value as below

<base href=”/”>

What is the use of RouterOutlet?

RouterOutlet required to bind the components whenever the navigation get called.

What type of data work with an async pipe , list out few?

  • Observable
  • Promise

When ngOnInit used to call in Angular?

In Angular, After display first bound properties nogOnInit will get called.

Which are the class decorators in Angular?

Class decorator appears before a class definition. Below is the following list of decorators which comes under class decorators.

@Pipe()

@Injectable()

@NgModule()

@Component()

@Directive()

Why do we required route guards in Angular?

This is one of the interface which tell the router to allow or not the navigation on requested route.

Comments

Post a Comment