angular-toturail

Angular Interview Preparation 

1. What is Angular ?

Ans :- Angular is a TypeScript-based open-source web application framework,
developed and maintained by Google. It offers an easy and powerful way of building
front end web-based applications. Angular integrates a range of features
like declarative template, dependency injection, end-to-end tooling, etc.
that facilitates web application development.

2. Ng-template ?

Ans:- <ng-template> is an angular element for rendering HTML.
It is never displayed directly. It can be displayed using the structural directive
that we use all the time: ngIf, ngFor and ngSwitch.

<ng-template> is a virtual element and its contents are displayed
when needed(based on condition)

<ng-template> should be used along with structural directives
like [ngIf],[ngFor],[ngSwitch] or custom structural directives.

Note:-  we’ll not use * with ngIf, ngFor and ngSwitch in <ng-template>
because * is shorthand notation of ng-template.

In ng-template we’ll put structure directive within [].

Example :- <ng-template [ngIf]></ng-template>

Books = [

{name: ‘Asp.net’, price:20},

{name: ‘Jave’, price:25},

{name: ‘Angular’, price:26},

{name: ‘SQL’, price:23}

];

<div *ngFor=”let book of books;  let i = index;”>

{{i + 1}}. {{book.name}} : {{book.price}}

</div>

Syntax of <ng-template> for ngFor

<ng-template ngFor let-book [ngForOf] = “book” let-i = “index”>

<p>{{i + 1}}. {{book.name}} : {{book.price}}</p>

</ng-template>

3. Ng-container ? 

Asn:- <ng-container> is a logical container that can be to group nodes but is not rendered
in the DOM tree as a node. <ng-container> as an HTML comment. 

In order to avoid having to create the extra div, we can instead use ng-container directive.

Example :- 

Books = [

{name: ‘Asp.net’, price:20},

{name: ‘Jave’, price:25},

{name: ‘Angular’, price:26},

{name: ‘SQL’, price:23}

];

Display = true;

<table>

<tbody>

<ng-container *ngFor=”let book of books”>

<tr *ngIf=”book.id > 1”>

<td>{{book.name}}</td>

</tr>

</ng-container>

</tbody>

</table>

Wrong 

<ul>

<div *ngFor=”let book of books”>

<li *ng=”display”>

{{book.name}}

</li>

</div>

</ul>

Right

<ul>

<ng-container *ngFor=”let book of books”>

<li *ng=”display”>

{{book.name}}

</li>

</ng-container>

</ul>

4. Ng-content ?

Ans :- Help of ng-content we can put different content in common components.

Note:- We’ll generate a component  for different-dirrerent content for same component.

Example:- ng g c card

we ‘ll put div with style in card HTML page.

<div class=”card”>

<div class=”card-body>

<ng-content select=”.card-title”></ng-content>

<p class=”card-text”>Some Quick example</p>

<ng-content select=”.btn”>

</div>

</div>

<app-card>

<h5 class=”card-title”>Mobile</h5>

<a routerLink=”mobile” class=”btn btn-success”>Know More Mobile</a>

</app-card>

<app-card>

<h5 class=”card-title”>TV</h5>

<a routerLink=”tv” class=”btn btn-success”>Know More TV</a>

</app-card>

5. Observable map in Angular ?

Ans:- Observable plays most basic role in reactive programming with RxJS.

Some methods or operator of Observable class

Subscribe, map, mergeMap, switchMap, exhaustMap, debounceTime, of, retry, catch,
throw etc.The map() operator transforms one value to another.
It takes a given value from the observable stream and applies the provided transforming
function to it.

6. @hostListener ?

Ans:- @HostListener() function decorator allow us to handle event of the host element in the
directive class.

@HostListener lets us to listen for event on host element or component.

First we need to import from @angular/core

Import { hostListener } from ‘@angular/core’;

@hostListener(‘click’) onClicnk() {

alert(‘clicked’);

}

It’ll automatic call without call this function we click.

Contractor(private el: ElementRef, private renderer: Renderer) {}

@hostListener(‘mouseover’) onMouseover() {

this.changeColor(‘red’);

}

changeColor(color: string){

this.renderer.setElementStyle(this.el.nativeElement, ‘color’, color)

}

7. @ViewChild using component ?

Ans:- ViewChild are used for communication in Angular. A component will get instance
of another component inside it using @ViewChild(). In this way parent component to
able to access the properties and method of child component. The Child component selector
will be used in parent component HTML template.

Example :-

We create two component 

ng g c counter

ng  g c counter-parent

We’ll call <app-conter> in counter-parent and call<connter-parent> in app-conponetn.html

we ‘ll take variable in counter ts file.

message : string = ‘’;

Couter: number = 0;

increseByOne() {

This.counter = this.counter+1;

This.message = “counter :” + this.counter;

}

dencreseByOne() {

This.counter = this.counter-1;

This.message = “counter :” + this.counter;

}

Then in counter html will bind {{message}}

Then we’ll go in counter parent ts file. First we’ll import ViewChild from core

@viewChild(CounterComponent)  counterComponent:CounterComponent;

increase() {

this.counterComponent.increseByOne();

}

decrease() {

his.counterComponent.decreseByOne();

}

In parent counter html

<button type=”button” click=”increase()></button>

<button type=”button” click=”decrease()></button>

8. @ViewChild using directive ?

Ans:- First we create a directive then we’ll import ElementRef and AfterViewInit from
@angular/core.

Implement in directive class like 

Export class ChangeColorDirective implements AfterViewInit and inject in constructor
ElementRef like 

constructor( elRef : ElementRef ) {} then we create a function 

ngAfterViewInit() {

this.elRef.nativeElement.style.color = ‘red’;

}

change(changeColor: string) {

this.elRef.nativeElement.style.color = changeColor;

}

In Parent component we’ll import viewChild like

@viewChild(ChangeColorDirective) changeColorDirective:ChangeColorDirective ;

changeColor(color: string) {

this.ChangeColorDirective.change(color);

}

In Parent color component HTML

<p <directiveName> appChangeColor>Change my Color</p>

<input type=”radio” (click)=”changeColor(“green”)>Green

<input type=”radio” (click)=”changeColor(“blue”)>Blue

<input type=”radio” (click)=”changeColor(“cyan”)>Cyan

9. @ViewChild using Template Variable ?

Ans:- @viewChild() can instantiate ElementRef corresponding to a

template reference variable. The template variable name will be passed in
@viewChiild as an argument. In this way component will be able to change
the appearance and behavior of element of given template variable.

Example :- well generate a template ng g c theme then well go in html

<input type=”text” #name>

<input type=”text” #state>

In theme ts file we’ll import ViewChild, ElementRef and AfterViewInit
from @angular/core

Then we’ll implement AfterViewInit in class 

Export class ThemeComponent implement AfterViewInit 

@viewChild(‘name’) elname.ElementRef;

@viewChild(‘state’) elsatate.ElementRef;

ngAfterViewInit() {

this.elname.nativeElement.style.backgroundColor=”black”;

this.elname.nativeElement.style.color=”white”;

this.elsate.nativeElement.style.backgroundColor=”cyan”;

this.elsate.nativeElement.style.color=”red”;

}

And put <app-theme> in app.html

1. Features of Angular

Ans :- 

1. Accessibility Application
2. Angular CLI
3. Animation Support
4. Cross-Plateform App Development
5. Code Generation
6. Code Splitting
7. Synergy with Popular Code Editors and IDEs
8. Template
9. Testing

2.  Services ?

Ans:- Services in Angular allow you to define code that's accessible
and reusable throughout multiple components.
A common use case for services is when you need to communicate with a
backend of some sort to send and receive data.

3. Angular Lifecycle Hooks ?

Ans: - OnChange()  – OnInit() –  DoCheck() – AfterContentInit()  –
AfterContentChecked() – AfterViewInit()  – AfterViewChecked()
– OnDestroy().

4. What is Transpiling in Angular ?

Asn :- Transpiling means converting the source code of one programming
language into another. In Angular, that usually means
converting TypeScript to JavaScript. You can write code
for your Angular application in TypeScript that is then transpiling
to JavaScript for the application. This happens internally and automatically.

5. What is AOT Compilation ?

Ans:- AOT refers to Ahead-Of-Time compilation. In Angular,
it means that the code you write for your application is compiled at
built time before the application is run in a browser. It’s an alternative
to just-in-time compilation, where code is compiled just before it is run
in the browser. AOT compilation can lead to better application performance.

6.  What are HTTP Interceptor ?

Ans:- Interceptor is a just fancy word of function that receives
request/response before they are processed/sent to the server.
You should use interceptor if you want to pre-process many types
of requests in one way.

7. What are Core and Shared modules for ?

Ans:-  A shared module serves as a generic module for all modules,
components, directives, pipes, etc.,
Which are not required to be in a single copy for the application but
need to be imported into many different modules. 

A core module is a place to store services that you need to have
in the form of singleton for entire application
(for example, a user authorization service with data storage about it).

8. What are some points to consider when optimizing an Angular 6 application for performance?

Ans:- There are many ways, some ideas include:

AOT compilation, bundling and uglifying the application,
tree shaking, lazy loading, separating dependencies and devDependencies,
Using OnPush and TrackBy, removing unnecessary 3rd party libraries
and import statements, avoid computing values within the template.

9. What are some important practices to secure an Angular application?

Ans:- Some basic guidelines include:

• Check that all requests come from within your own web app and not external websites
• Sanitize all input data
• Use Angular template instead of DOM APIs
• Content Security Policies
• Validate all data with server-side code
• Use an offline template compiler
• Avoid including external URLs in your application
• Make JSON responses non-executable
• Keep all libraries and frameworks up-to-date