01.

What is Angular 2 and features

02. Advantages of using Angular 2 over Angular 1
03. What is an Entry Component? How to add? -> @ngModule({...bootstrap:[AppComponent]}) Or
Route({path:'', COmponent: 'AppComponent'})
04. Life cycle hooks of Angular 2 (ngOnChanges, ngOnInit, ngDoCheck, ngOnDestroy, ngAfterContentInit,
ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked)
05. Which of the Angular life cycle component execution happens when a data-bound input value
updates?-> ngOnChanges
05. How many times ngOnInit calls.
06. How many times ngDoCheck calls.
07. ngAfterViewInit & ngAfterViewChecked :- If you have parent component and child component, child
component has textbox, then in parent I want to call a some function
one child view get loaded, and call another funtion one child textbox value has changed.
08. ngAfterContentInit & ngAfterContentChecked :- If some external content is projected into
component, then how will you know some external content is loaded and checked.
09. ngContent:- <ngContent></ngContent>
10. Data Binding:- String Interpolation, property binding [], event binding (), two way binding
[(ngModel)]
10. Local reference variables, ViewChild, and ContentChild
11. Forms - Template Driven Form, Reactive Form(FormGroup, FormControl, FormArray, Validations)
12. What modules should you import in Angular to use [(ngModel)] and reactive forms? =>
FormsModule and Reactiveforms Module.
12. Observables Vs Promises
13. Pipe/Filter & Custome Pipe, AsyncPipe
14. Service, Singleton Service -> @Injectable({providedIn: 'root'});
15. If you provide a service in two components‘ “providers” section of @Component decorator, how
many instances of service shall get created? => 2
16. What are HTTP Interceptors
15. Routing - routerLink, <routerOutlet>, RoutGaurd, Navigate from component
16. How to add route for page not found. If user has entered url which not available into your route
array then how to display page not found
const route: Route({path:'**', component: NotFoundComponent});
17. Event Emitters
18. LazyLoading
19. AOT
20. How would you optimize the angular 2 application for better performance?
21. how do you pass from one component to other
22. package.js
23. What is the difference between constructor and ngOnlnit in Angular
24. What is .angular-cli.json. Where can I find it.
25. Structural directive in Angular 2 ngIf ngFor
26. Angular 2 hidden property ngshow and nghide
27. What is interpolation
28. Directives
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.
29. Internationalization
30. ViewEncapsulation :- ViewEncapsulation determines whether the styles defined in a particular
component will affect the entire application or not.
Emulated – Styles used in other HTML spread to the component
Native – Styles used in other HTML doesn’t spread to the component
None – Styles defined in a component are visible to all components of the application
31. What is Dependency Injection in Angular?
32. What is ElementRef & TemplateRef
33. Differentiate between Components and Directives in Angular

Angular 4
01. New features of Angular 4
- Angular 4 uses TypeScript version 2.2
-if else
<span *ngIf="isavailable; else condition1">Condition is valid.</span>
<ng-template #condition1>Condition is invalid</ng-template>
-if then else
<span *ngIf="isavailable; then condition1 else condition2">Condition is valid.</span>
<ng-template #condition1>Condition is valid</ng-template>
<ng-template #condition2>Condition is invalid</ng-template>
-as keyword in for loop
With the help of as keyword you can store the value as shown below -
<div *ngFor="let i of months | slice:0:5 as total">
Months: {{i}} Total: {{total.length}}
</div>
-Animation in Angular 4 is available as a separate package and needs to be imported from
@angular/animations.
-Template
Angular 4 uses <ng-template> as the tag instead of <template>; the latter was used in
Angular2. The reason Angular 4 changed <template> to <ng-template>
is because of the name conflict of the <template> tag with the html <template>
standard tag. It will deprecate completely going ahead. This is one of
the major changes in Angular 4.
-TypeScript 2.2 - Angular 4 is updated to a recent version of TypeScript, which is 2.2
-Pipe Title Case - Angular 4 has added a new pipe title case, which changes the first letter of
each word into uppercase.
<div>
<h2>{{ 'Angular 4 titlecase' | titlecase }}</h2>
</div>
The above line of code generates the following output – Angular 4 Titlecase
-Materials - To start using materials, you need to install two packages - materials and cdk. npm
install --save @angular/material @angular/cdk

Angular 6
01. New features of angular 6
-Angular6 uses TypeScript 2.9
 -HTTPClient API - HTTPClient API was introduced to deprecate the HTTP library. HTTPClient API is
much faster, secure and efficient than HTTP library.
-testability features
-typed request and response objects
-request and response interception
-Observable apis, and streamlined error handling.

-Multiple export aliases - A component can be exported using multiple aliases to ease the
migration process.

-Internationalized Pipes for Number, Date, and Currency - New pipes are introduced for better
standardization.

-Lambda support - lambda expressions with proper names can be used instead of functions.

-Build Optimizer - Build Optimizer introduced. It optimizes the build size and improves the
application speed. Angular CLI uses Build Optimizer automatically.

-Improved Compiler - Compiler from Angular 5 onwards supports incremental compilation

leading for faster compilation. Compiler uses TypeScript transforms, a new feature of TypeScript 2.3
available onwards.

Let us now see the new features added to Angular 6 -

-Updated Angular CLI, Command Line interface - New commands added, like ng-update to
migrate from previous version to current version. ng-add to quickly add application features to make
application a progressive web apps.

-Updated CDK, Component Development Kit - Supports creating custom UI elements without
need of angular material library. Supports responsive web design layouts. Supports overlay packages to
create pop-ups.

-Updated Angular Material - New Tree component added, mat-tree, a styled version and cdk-
tree, a unstyled version, to represent a hierarchical structure like tree.

-Usage of RxJS, a reactive JS library

-Angular Element - Allows Angular Components to be published as Web Components which can
then be used in any HTML page. Using Angular Element package, native custom elements can be created
easily.

-Multiple Validators - Allows multiple validators to be applicable on a form builder.

-Tree Shaking on Services - Now tree shaking can be applied on services as well to remove the
dead code. Angular 6 introduces a new way of registering a provider directly inside the @Injectable()
decorator.
It is achieved by using the providedIn attribute
 -Angular 6 uses <ng-template> instead of <template>

Angular 7
-@angular/core can have only 418 modules
-Drag and drop feature for elements
-Virtual scrolling

1. Typescript
2. How to compile a Typescript file
3. What is Transpiling

1. What are Closures in Javascript

2. List types of scopes available in Javascript
3. What are Mixins in javascript