Interview question on Angular

What is TypeScript?
TypeScript is a typed superset of JavaScript created by Microsoft that adds optional types, classes, async/await,and many other features, and compiles to plain JavaScript. Angular built entirely in TypeScript and used as aprimary language. You can install it globally as

--------------------------------------------------------------------------
2)What are the key components of Angular?
Angular has the below key components,

Component: These are the basic building blocks of angular application to control HTML views.

Modules: An angular module is set of angular basic building blocks like component, directives, services etc. 

An application is divided into logical pieces and each piece of code is called as "module" which perform 
a single task.
 
Templates: This represent the views of an Angular application.
Services: It is used to create components which can be shared across the entire application.
Metadata: This can be used to add more data to an Angular class.

-------------------------------------------------------
3)What are directives?
Directives add behaviour to an existing DOM element or an existing component instance.

-------------------------------------------------------
4)What are components?
Components are the most basic UI building block of an Angular app which formed a tree of Angular components. 

These components are subset of directives and always associated with a template. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. 

When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:

ChangeDetectionStrategy#OnPush sets the strategy to CheckOnce (on demand).
ChangeDetectionStrategy#Default sets the strategy to CheckAlways.

viewProviders : Defines the set of injectable objects that are visible to its view DOM children

encapsulation : 
An encapsulation policy for the template and CSS styles. One of:

ViewEncapsulation.Native: Deprecated. Use ViewEncapsulation.ShadowDom instead.
ViewEncapsulation.Emulated: Use shimmed CSS that emulates the native behavior.
ViewEncapsulation.None: Use global CSS without any encapsulation.
ViewEncapsulation.ShadowDom: Use Shadow DOM v1 to encapsulate styles.

encapsulation: ViewEncapsulation
If not supplied, the value is taken from CompilerOptions. The default compiler option is ViewEncapsulation.Emulated.



-------------------------------------------------------
5)What are the differences between Component and Directive?

To register a component we use @Component meta-data annotation
To register directives we use @Directive meta-data annotation

Components are typically used to create UI widgets
Directive is used to add behavior to an existing DOM element

Component is used to break up the application into smaller components
Directive is use to design re-usable components

Only one component can be present per DOM element
Many directives can be used per DOM element

@View decorator or templateurl/template are mandatory
Directive doesn't use View

----------------------------------
6) What is a template?
A template is a HTML view where you can display data by binding controls to properties of an Angular component. 

-----------------------------------
7) What is a module?
Modules are logical boundaries in your application and the application is divided into separate modules to separate 
the functionality of your application. 

The NgModule decorator has three options

The imports option is used to import other dependent modules. The BrowserModule is required by default for any web based angular application

The declarations option is used to define components in the respective module
The bootstrap option tells Angular which Component to bootstrap in the application

-----------------------------------
8)What are lifecycle hooks available?
The description of each lifecycle method is as below,

ngOnChanges: When the value of a data bound property changes, then this method is called.

ngOnInit: This is called whenever the initialization of the directive/component after Angular first displays 
the data-bound properties happens.

ngDoCheck: This is for the detection and to act on changes that Angular can't or won't detect on its own.

ngAfterContentInit: This is called in response after Angular projects external content into the component's view.

ngAfterContentChecked: This is called in response after Angular checks the content projected into the component.

ngAfterViewInit: This is called in response after Angular initializes the component's views and child views.

ngAfterViewChecked: This is called in response after Angular checks the component's views and child views.

ngOnDestroy: This is the cleanup phase just before Angular destroys the directive/component.

----------------------------------
9)What is a data binding?
Data binding is a core concept in Angular and allows to define communication between a component and the DOM.
From the Component to the DOM: Interpolation: {{ value }}: Adds the value of a property from the component
<li>Name: {{ user.name }}</li>
<li>Address: {{ user.address }}</li>
----------------------------------------------------------------
Property binding: [property]=”value”: The value is passed from the component to the specified property or simple HTML attribute
<input type="email" [value]="user.email">
----------------------------------------------------------------
From the DOM to the Component: Event binding: (event)=”function”: When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component
<button (click)="logout()"></button>
----------------------------------------------------------------
Two-way binding: Two-way data binding: [(ngModel)]=”value”: Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync
<input type="email" [(ngModel)]="user.email">

--------------------------------------------------------------------------------------------------------
10) What is metadata?
Metadata is used to decorate a class so that it can configure the expected behavior of the class. 
Class decorators : e.g. @Component and @NgModule

Property decorators :  Used for properties inside classes, e.g. @Input and @Output
export class MyComponent {
    @Input()
    title: string;
}

Method decorators :  Used for methods inside classes, e.g. @HostListener
export class MyComponent {
    @HostListener('click', ['$event'])
    onHostClick(event: Event) {
        // clicked, `event` available
    }
}
Parameter decorators :  Used for parameters inside class constructors, e.g. @Inject
export class MyComponent {
    constructor(@Inject(MyService) myService) {
        console.log(myService); // MyService
    }
}
------------------------------------------------------------------------------------------------------------
11)What is the difference between constructor and ngOnInit?
TypeScript classes has a default method called constructor which is normally used for the initialization purpose.

Whereas ngOnInit method is specific to Angular, especially used to define Angular bindings. Even though constructor getting called first, it is preferred to move all of your Angular bindings to ngOnInit method. In order to use ngOnInit

------------------------------------------------------------------------------------------------------------
12)What is the purpose of async pipe?
The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted.When a new value is emitted, the pipe marks the component to be checked for changes. 

------------------------------------------------------------------------------------------------------------

<li *ngFor="let user of users">
  {{ user }}
</li>

<p *ngIf="user.age > 18">You are not eligible for student pass!</p>

------------------------------------------------------------------------------------------------------------
13) What happens if you use script tag inside template?
Angular recognizes the value as unsafe and automatically sanitizes it, which removes the <script> tag but keeps safe content such as the text content of the <script> tag. This way it eliminates the risk of script injection attacks. If you still use it then it will be ignored and a warning appears in the browser console.

------------------------------------------------------------------------------------------------------------
14)What is interpolation?
Interpolation is a special syntax that Angular converts into property binding. It’s a convenient alternative to property binding. It is represented by double curly braces({{}}). The text between the braces is often the name of a component property. 

------------------------------------------------------------------------------------------------------------
15)What are template expressions?
A template expression produces a value similar to any Javascript expression. Angular executes the expression and assigns it to a property of a binding target; the target might be an HTML element, a component, or a directive. In the property binding, a template expression appears in quotes to the right of the = symbol as in [property]="expression". In interpolation syntax, the template expression is surrounded by double curly braces.

<h3>{{username}}, welcome to Angular</h3>
The below javascript expressions are prohibited in template expression

assignments (=, +=, -=, ...)
new
chaining expressions with ; or ,
increment and decrement operators (++ and --)

------------------------------------------------------------------------------------------------------------
16)What are template statements?
A template statement responds to an event raised by a binding target such as an element, component, or directive. 

The template statements appear in quotes to the right of the = symbol like (event)="statement". 

Let's take an example of button click event's statement

<button (click)="editProfile()">Edit Profile</button>

-------------------------------------------------------------------------------------------------------------
17) How do you categorize data binding types?
Binding types can be grouped into three categories distinguished by the direction of data flow.
They are listed as below,

From the source-to-view
From view-to-source
View-to-source-to-view

-------------------------------------------------------------------------------------------------------------
18)What are pipes?
A pipe takes in data as input and transforms it to a desired output. 

Built-in pipes
Angular comes with a stock of pipes such as DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, and PercentPipe. 
They are all available for use in any template.

Parameterizing a pipe
A pipe can accept any number of optional parameters to fine-tune its output. To add parameters to a pipe, 
follow the pipe name with a colon ( : ) and then the parameter value (such as currency:'EUR').
If the pipe accepts multiple parameters, separate the values with colons (such as slice:1:5)

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

Chaining pipes
You can chain pipes together in potentially useful combinations. 

The chained hero's birthday is
{{  birthday | date:'fullDate' | uppercase}}

----------------------------------------------------------------------------------------------------------------
19) Custom pipes
You can write your own custom pipes.

The PipeTransform interface
The transform method is essential to a pipe. The PipeTransform interface defines that method and guides both 
tooling and the compiler. 

----------------------------------------------------------------------------------------------------------------
20)What is the difference between pure and impure pipe?
A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. 
For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference
(Date, Array, Function, Object).

 An impure pipe is called for every change detection cycle no matter whether the value or parameters changes. 
 i.e, An impure pipe is called often, as often as every keystroke or mouse-move.

----------------------------------------------------------------------------------------------------------------
21)What is a bootstrapping module?
Every application has at least one Angular module, the root module that you bootstrap to launch the application is called as bootstrapping module. It is commonly known as AppModule. 

----------------------------------------------------------------------------------------------------------------
22)What are observables?
Observables are declarative which provide support for passing messages between publishers and subscribers in your application. They are mainly used for event handling, asynchronous programming, and handling multiple 
values. 

----------------------------------------------------------------------------------------------------------------
23)What is HttpClient and its benefits?
Most of the Front-end applications communicate with backend services over HTTP protocol using either XMLHttpRequest interface or the fetch() API. Angular provides a simplified client HTTP API known as HttpClient which is based on top of XMLHttpRequest interface.

The major advantages of HttpClient can be listed as below,

Contains testability features
Provides typed request and response objects
Intercept request and response
Supports Observalbe APIs
Supports streamlined error handling

----------------------------------------------------------------------------------------------------------------
24)What is RxJS?
RxJS is a library for composing asynchronous and callback-based code in a functional, reactive style using Observables. 

Many APIs such as HttpClient produce and consume RxJS Observables and also uses operators for processing observables. For example, you can import observables and operators for using HttpClient as below,

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

----------------------------------------------------------------------------------------------------------------
25)What is subscribing?
An Observable instance begins publishing values only when someone subscribes to it. So you need to subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications.

----------------------------------------------------------------------------------------------------------------
26)What is an observer?
Observer is an interface for a consumer of push-based notifications delivered by an Observable. 

----------------------------------------------------------------------------------------------------------------
27)What is multicasting?
Multi-casting is the practice of broadcasting to a list of multiple subscribers in a single execution. 

Let's demonstrate the multi-casting feature,
var source = Rx.Observable.from([1, 2, 3]);
var subject = new Rx.Subject();
var multicasted = source.multicast(subject);

// These are, under the hood, `subject.subscribe({...})`:
multicasted.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
multicasted.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

----------------------------------------------------------------------------------------------------------------
28)What are the utility functions provided by RxJS?
The RxJS library also provides below utility functions for creating and working with observables.

Converting existing code for async operations into observables Iterating through the values in a stream Mapping values to different types Filtering streams Composing multiple streams

----------------------------------------------------------------------------------------------------------------
29)What are observable creation functions?
RxJS provides creation functions for the process of creating observables from things such as promises, events, timers and Ajax requests. 

----------------------------------------------------------------------------------------------------------------
30)What will happen if you do not supply handler for observer?
Normally an observer object can define any combination of next, error and complete notification type handlers. If you don't supply a handler for a notification type, the observer just ignores notifications of that type.

----------------------------------------------------------------------------------------------------------------
31)What are angular elements?
Angular elements are Angular components packaged as custom elements(a web standard for defining new HTML elements in a framework-agnostic way). Angular Elements hosts an Angular component, providing a bridge between the data and logic defined in the component and standard DOM APIs, thus, providing a way to use Angular components 
in non-Angular environments.

----------------------------------------------------------------------------------------------------------------
32)What are the various kinds of directives?
There are mainly three kinds of directives.

Components — These are directives with a template.
Structural directives — These directives change the DOM layout by adding and removing DOM elements.
Attribute directives — These directives change the appearance or behavior of an element, component, or another 
directive

----------------------------------------------------------------------------------------------------------------
33)What is the purpose of base href tag?
The routing application should add element to the index.html as the first child in the tag inorder to indicate how to compose navigation URLs. If app folder is the application root then you can set the href value as below

<base href="/">

----------------------------------------------------------------------------------------------------------------
34)What are the router imports?
import { RouterModule, Routes } from '@angular/router';

----------------------------------------------------------------------------------------------------------------
35)What is router outlet?
The RouterOutlet is a directive from the router library and it acts as a placeholder that marks the spot in the template where the router should display the components for that outlet. Router outlet is used like a component,

<router-outlet></router-outlet>
<!-- Routed components go here -->

----------------------------------------------------------------------------------------------------------------
36)What are active router links?
RouterLinkActive is a directive that toggles css classes for active RouterLink bindings based on the current RouterState. i.e, the Router will add CSS classes when this link is active and and remove when the link is inactive. For example, you can add them to RouterLinks as below

<h1>Angular Router</h1>
<nav>
 <a routerLink="/todosList" routerLinkActive="active">List of todos</a>
 <a routerLink="/completed" routerLinkActive="active">Completed todos</a>
</nav>
<router-outlet></router-outlet>

----------------------------------------------------------------------------------------------------------------
37)What is router state?
RouterState is a tree of activated routes. Every node in this tree knows about the "consumed" URL segments, the extracted parameters, and the resolved data. You can access the current RouterState from anywhere in the application using the Router service and the routerState property.

@Component({templateUrl:'template.html'})
class MyComponent {
  constructor(router: Router) {
    const state: RouterState = router.routerState;
    const root: ActivatedRoute = state.root;
    const child = root.firstChild;
    const id: Observable<string> = child.params.map(p => p.id);
    //...
  }
}

----------------------------------------------------------------------------------------------------------------
38) What are router events?
During each navigation, the Router emits navigation events through the Router.events property allowing you to track the lifecycle of the route. The sequence of router events is as below,

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

----------------------------------------------------------------------------------------------------------------
39)What is activated route?
ActivatedRoute contains the information about a route associated with a component loaded in an outlet. It can also be used to traverse the router state tree. The ActivatedRoute will be injected as a router service to access the information. In the below example, you can access route path and parameters,

@Component({...})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: Observable<string> = route.params.pipe(map(p => p.id));
    const url: Observable<string> = route.url.pipe(map(segments => segments.join('')));
    // route.data includes both `data` and `resolve`
    const user = route.data.pipe(map(d => d.user));
  }
}

----------------------------------------------------------------------------------------------------------------
40)What is the purpose of Wildcard route?
If the URL doesn't match any predefined routes then it causes the router to throw an error and crash the app. 
In this case, you can use wildcard route
{ path: '**', component: PageNotFoundComponent }

----------------------------------------------------------------------------------------------------------------
41)What are different types of compilation in Angular?
Angular offers two ways to compile your application,

Just-in-Time (JIT)
Ahead-of-Time (AOT)

Just-in-Time (JIT) : is a type of compilation that compiles your app in the browser at runtime. JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands. i.e, the below commands used for JIT compilation,

ng build
ng serve

AOT :
Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time. For AOT compilation, include the 

--aot option with the ng build or ng serve command as below,

ng build --aot
ng serve --aot
Note: The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default.

----------------------------------------------------------------------------------------------------------------
42)Why do we need compilation process?
The Angular components and templates cannot be understood by the browser directly. Due to that Angular applications require a compilation process before they can run in a browser. For example, In AOT compilation, both Angular HTML and TypeScript code converted into efficient JavaScript code during the build phase before browser runs it.

----------------------------------------------------------------------------------------------------------------
43)What are the advantages with AOT?
Below are the list of AOT benefits,

Faster rendering: The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.

Fewer asynchronous requests: It inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests.

Smaller Angular framework download size: Doesn't require downloading the Angular compiler. Hence it dramatically reduces the application payload.

Detect template errors earlier: Detects and reports template binding errors during the build step itself

Better security: It compiles HTML templates and components into JavaScript. So there won't be any injection attacks.

----------------------------------------------------------------------------------------------------------------
44)What are the ways to control AOT compilation?
You can control your app compilation in two ways

By providing template compiler options in the tsconfig.json file

By configuring Angular metadata with decorators

----------------------------------------------------------------------------------------------------------------
45)What are the restrictions of metadata?
In Angular, You must write metadata with the following general constraints,

Write expression syntax with in the supported range of javascript features 
The compiler can only reference symbols which are exported
Only call the functions supported by the compiler
Decorated and data-bound class members must be public.

----------------------------------------------------------------------------------------------------------------
46)What are the two phases of AOT?
The AOT compiler works in three phases,

Code Analysis: The compiler records a representation of the source

Code generation: It handles the interpretation as well as places restrictions on what it interprets.

Validation: In this phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.

----------------------------------------------------------------------------------------------------------------
47)Can I use arrow functions in AOT?
No, Arrow functions or lambda functions can’t be used to assign values to the decorator properties. For example, the following snippet is invalid:

@Component({
  providers: [{
    provide: MyService, useFactory: () => getService()
  }]
})
To fix this, it has to be changed as following exported function:

function getService(){
  return new MyService();
}

@Component({
  providers: [{
    provide: MyService, useFactory: getService
  }]
})

----------------------------------------------------------------------------------------------------------------
48)What is the purpose of metadata json files?
The metadata.json file can be treated as a diagram of the overall structure of a decorator's metadata, represented as an abstract syntax tree(AST). 

----------------------------------------------------------------------------------------------------------------
49)What is folding?
The compiler can only resolve references to exported symbols in the metadata. Where as some of the non-exported members are folded while generating the code. i.e Folding is a process in which the collector evaluate an expression during collection and record the result in the .metadata.json instead of the original expression.

----------------------------------------------------------------------------------------------------------------
50)What are macros?
The AOT compiler supports macros in the form of functions or static methods that return an expression in a single return expression. For example, let us take a below macro function,

export function wrapInArray<T>(value: T): T[] {
  return [value];
}
You can use it inside metadata as an expression,

@NgModule({
  declarations: wrapInArray(TypicalComponent)
})
export class TypicalModule {}
The compiler treats the macro expression as it written directly

@NgModule({
  declarations: [TypicalComponent]
})
export class TypicalModule {}

----------------------------------------------------------------------------------------------------------------
51)What is metadata rewriting?
Metadata rewriting is the process in which the compiler converts the expression initializing the fields such as useClass, useValue, useFactory, and data into an exported variable, which replaces the expression. Remember that the compiler does this rewriting during the emit of the .js file but not in definition files( .d.ts file).

----------------------------------------------------------------------------------------------------------------
52)How do you describe various dependencies in angular application?
The dependencies section of package.json with in an angular application can be divided as follow,

Angular packages: Angular core and optional modules; their package names begin @angular/.

Support packages: Third-party libraries that must be present for Angular apps to run.
Polyfill packages: Polyfills plug gaps in a browser's JavaScript implementation.

----------------------------------------------------------------------------------------------------------------
53)What is zone?
A Zone is an execution context that persists across async tasks. Angular relies on zone.js to run Angular's change detection processes when native JavaScript operations raise events

----------------------------------------------------------------------------------------------------------------
54)What is the purpose of common module?
It exports all the basic Angular directives and pipes

The commonly-needed services, pipes, and directives provided by @angular/common module. Apart from these 
HttpClientModule is available under @angular/common/http.

----------------------------------------------------------------------------------------------------------------
55)What is codelyzer?
Codelyzer provides set of tslint rules for static code analysis of Angular TypeScript projects. You can run the static code analyzer over web apps, NativeScript, Ionic etc. Angular CLI has support for this and it can be use as below,

ng new codelyzer
ng lint

----------------------------------------------------------------------------------------------------------------
56)What is tslint.json ?
Angular Applications are already integrated with TSLint, tslint.json file can be found at the root of your project. 

TSLint is also defined as dev dependency in package.json

----------------------------------------------------------------------------------------------------------------
57)What is TSLint ?
TSLint is a static code analysis tool used in software development for checking Typescript code quality.

TSLint checks your TypeScript code for readability, maintainability, and functionality errors.

----------------------------------------------------------------------------------------------------------------
58)What is angular animation?
Angular's animation system is built on CSS functionality in order to animate any property that the browser considers animatable. 

These properties includes positions, sizes, transforms, colors, borders etc. The Angular modules for animations are @angular/animations and @angular/platform-browser and these dependencies are automatically added to your project when you create a project using Angular CLI.

----------------------------------------------------------------------------------------------------------------
59)What is State function?
Angular's state() function is used to define different states. It will be called at the end of each transition. 

This function takes two arguments: a unique name like open or closed and a style() function. 
For example, 
you can write a open state function

state('open', style({
  height: '300px',
  opacity: 0.5,
  backgroundColor: 'blue'
})),

---------------------------------------------------------------------------------------------------------------
60)Interceptors in Angular
HttpInterceptor was introduced with Angular 4.3. It provides a way to intercept HTTP requests and responses to transform or handle them before passing them along.

Although interceptors are capable of mutating requests and responses, the HttpRequest and HttpResponse instance properties are read-only, rendering them largely immutable. 

Angular applies interceptors in the order that you provide them. If you provide interceptors A, then B, then C, 

requests will flow in A->B->C and responses will flow out C->B->A.

Interceptors is that they can process the request and response together. 

----------------------------------------------------------------------------------------------------------------
60)List of Pipies 
AsyncPipe
Unwraps a value from an asynchronous primitive.

CurrencyPipe
Transforms a number to a currency string, formatted according to locale rules that determine group sizing and 
separator, decimal-point character, and other locale-specific configurations.

DatePipe
Formats a date value according to locale rules.

DecimalPipe
Transforms a number into a string, formatted according to locale rules that determine group sizing and separator, 
decimal-point character, and other locale-specific configurations.

DeprecatedCurrencyPipe
Formats a number as currency using locale rules.

DeprecatedDatePipe
Formats a date according to locale rules.

DeprecatedDecimalPipe
Formats a number as text. Group sizing and separator and other locale-specific configurations are based on the 
active locale.

DeprecatedPercentPipe
Formats a number as percentage according to locale rules.

I18nPluralPipe
Maps a value to a string that pluralizes the value according to locale rules.

I18nSelectPipe
Generic selector that displays the string that matches the current value.

JsonPipe
Converts a value into its JSON-format representation. Useful for debugging.

KeyValuePipe
Transforms Object or Map into an array of key value pairs.

LowerCasePipe
Transforms text to all lower case.

PercentPipe
Transforms a number to a percentage string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

SlicePipe
Creates a new Array or String containing a subset (slice) of the elements.

TitleCasePipe
Transforms text to title case. Capitalizes the first letter of each word, and transforms the rest of the word to lower case. Words are delimited by any whitespace character, such as a space, tab, or line-feed character.

UpperCasePipe
Transforms text to all upper case.


source collected from github : https://github.com/sudheerj/angular-interview-questions#what-is-angular-framework