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.

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()

}

}

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.

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 }}

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.

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’;

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.

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=”/”>

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’;

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

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

Angular has two types to compile your application,

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

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

Below is the basic syntax of decorator –

@() with optional parameters

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

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’

})),

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

@Pipe()

@Injectable()

@NgModule()

@Component()

@Directive()

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();

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

This used for Two-way data binding

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

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.

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.

ngOnChanges()

ngOnInit()

ngAfterViewInit()

ngOnDestroy()

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

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

The lean component used only to display the data.

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

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

Angular application is made by using the below.

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

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.

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.

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

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

• String
• Any
• Void
• Boolean
• Number

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

• Element directive
• CSS directive
• Attribute directive

Directive used to make DOM level changes which works dynamically.

• Attribute Directive
• Component Directive
• Structural Directive

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

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.

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

ngModel adds below CSS classes to allow styling and control.

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

Below is the few validators which are built-in .

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

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

Angular CLI works to generate workspace directory in AngularJS.

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

• Observable
• Promise

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.

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