Angular interview Questions

Most Common Angular Interview Questions :

• What is Angular  ?

Client Side Framework based on node js and typescript

• What are the building blocks of Angular ?

Component , Template , Service , Dependency Injection , Data binding , Routing , Module

• How does Angular Application starts ?

main.ts -> platformBrowserDynamic().bootstrapModule(AppModule) -> AppModule

• What is a component ?

Basic building block , it has template which is loaded on using the selector .

• What is a template ?

it is the html part of component .
Two types are there
1. within the component.ts enclosed in back tick
2. in a separate html file .

• How to style a component ?

Three ways : 1. inside the component.ts using style
2. in a separate css using styleUrl
3 . multiple css files can be included using styles [] .

• What is providers for component ?

It specifies the Services to be used in the component .

• Explain model to view binding ?

Two ways : {{}} Interpolation : variables defined in component can be used in template .
[] property binding : a known property of html element is bound to a variable defined in component .

• Explain view to model binding ?

using () : event binding : binds an event to method defined in component .

• Explain two way binding ?

using [()] : it is a combination of event binding and property binding , it synchronizes the data between model and view . 
eg : <input [(ngModel)] = "myInput" > <span >you entered {{myInput}} </span>

• What is a module ?

Module groups related components , services , directives and pipes .
4 Parts :
1. declarations [] : list of components , pipes and directives
2. imports [] : list of modules , used to import routes
3. providers [] : list of services
4. bootstrap : the root component that Angular creates and inserts into the index.html.

• What is a root module ?

The module loaded on start of the app . This imports BrowserModule  . Only one per app .

• What are directives ?

Add to the DOM .

3 Types :
Components :directives with template.
Structural :  add / remove DOM elements. *ng-if , *ng-for
Attribute  : change the appearance or behavior of an element, component, or another directive. Eg : ngClass

• How to create custom attribute directive ?

using @Directive , in the constructor we can access the native element from ElementRef.nativeElement , using which we can manipulate the DOM.
we can also use @Input to get the input in the specified property .

• How to create custom structural directive ?

using @Directive , inject ViewContainerRef and TemplateRef , in ngOnChanges()  using this.container.createEmbeddedView  .

• How to pass data from parent and child component ?

Using @Input on a property in child component and pass the data to property in while it is called in parent component .

• How to pass data from child to parent component ?

1.  Using @ViewChild(Component class) add to a variable of Child component in parent  component  
2.  Using @Output and EventEmitter .eg :  @Output() voted = new EventEmitter<boolean>();            this.voted.emit(agreed);

Note: EventEmitter is subclass of Observable .

• How to pass data between unrelated component ?

Using a service , create a variable as BehaviorSubject type , another variable as observable for the variable  and a method to change the value . Subscribe the observable in both components , if value is changed from one component it will be reflected in other component .

• What is LifeCycle hook?

For a component Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM. 

1. ngOnChanges()
2. ngOnInit()
3. ngDoCheck()
4. ngAfterContentInit()
5. ngAfterContentChecked()
6. ngAfterViewInit()
7. ngAfterViewChecked()
8. ngOnDestroy() 

Before these methods the constructor is called .

• What is a service ?

It is used to perform a task , like http put or get .

• What is dependency Injection ?

Angular creates instance of all  the services and makes it available for the component . Services are singleton .

1. constructor injection :dependencies are made available through constructor 
2. property injection :directly setting the object property .

• What is @optional

For optional dependencies , injector will inject null if dependencies are not found.

• What is injector?

resolves token into dependency .

• Explain   Hierarchical injector.

tree of injectors that parallels an app's component tree

• What is a provider ?

is an instruction to the DI system on how to obtain a value for a dependency .

• What is view provider

does not allow content be injected in the projected content

• How to create a service ?

using @Injectible

• When to use @providedin : root ?

when service is used anyway , if service is rarely used specify the service in provider [] of component .providedIn can also hold any module other than root .

• What is routing?

Loading of components based on URL .

• How to add routing to an angular app?

Create Routes[] in module , in imports add RouterModule.forRoot(appRoutes).Add router-outlet where the component should be loaded.

• What is RouterLink directive ?

generates hyperlink that can be embedded in anchor tags for navigation .

• What is redirectTo ?

It is used to match a wildcard and redirect to a different URL . The component associated with the redirected URL will be loaded .

• What is useHash:true

enables hash(#) based routing .

• What is Routing module?

AppRoutingModule is top level module dedicated for routing .In the ng module exports: [ RouterModule ]

• What is a feature module ?

Contains a group of components, directives pipes  with similar features  and imported in root module .

• What is lazy routing ?

Root module should be split into feature module and a routing module . Feature modules can have its own routing module . RouterModule.forRoot() is used in the app Routing Module and RouterModule.forChild() is used in the Routing Module of feature module . In the app routing module loadChildren is used instead of component .

• What is route Guards ?

tells the router whether or not to navigate to the requested route 

CanActivate

CanActivateChild

CanDeactivate

CanLoad

Resolve

• What is form ?

Handles user data . 2 Types :

1. Template driven :
2. Model Driven /Reactive

• Explain Template driven form .

Used for the following :

1.  two-way data binding : ngModel , ngModelGroup
2.  change tracking: pristine, dirty , valid 
3.  validation : required  , pattern , minlength 
4.  error handling  *ngIf

• Explain Model Driven / reactive Forms .

Using ReactiveFormsModule
1. FormGroup FormControl
2. FormBuilder
3. FormArray

• How to create a custom validator ?

Create a typescript class with a method
Add it in formbuilder . Group method for the name

• What is shadow DOM?

provides hidden area on the page for scripts HTML and CSS . Markup and styles in this area will not affect the other part of the page also will not be affected by other  part .

• What is view encapsulation ?

Added to a component using encapsulation attribute .

1. ViewEncapsulation.Native : lets angular to use the shadow DOM . isolates the component , default styles will not be applied to this component . 
2. ViewEncapsulation.Emulated : applied by  default 
3. ViewEncapsulation.None : the styles defined for this component is applied to all other component .

• Diffentiate observable and promise.

1. Promise is executed immediately, observable is lazy and executes only if it is subscribed.
2. Observable can be cancelled, promise can't.
3. Promise handles single event , observable is a stream and allows multiple events.

• What is async pipe?

It allows to bind with the observable directly in the template.
The advantage of using AsyncPipe is that we don’t need to call subscribe on our observable and store the intermediate data on our component.

• How to create a promise .

Promise handles single event when async operation completes or fails
let promise = new Promise((resolve, reject) => {

    //http call 

  });

return promise;

•  What is transpilation ?

Convert from one type of source code to another type of source code .

1. Build time : takes the type script files and compiles it to javascript files 
2. Runtime : happens at the browser at runtime . Typescript compiles is loaded in the browser which compiles the typescript files on the fly .

• What is webpack?

A tool to bundle application source code and load that code from server to browser .

• What are the special characters in angular ?

1. [] : property binding 
2. {{}} : interpolation
3. () : event binding
4. [()] : two way binding 
5. | : pipe
6. * : structural directive
7. ?  : safe navigation 
8. # : template reference variable 

• Explain folders in angular project ?

1. e2e : contain end to end tests
2. src : application code
3. assets : static content like images .
4. environments : configuration for developer and production environments .

• Explain the important files in Angular .

1. package.json
2. angular.json
3. main.ts
4. tslint.json
5. tsconfig.app.json
6. proxyconfig.json

• How do you change the path of node_modules?
• What are the symbols ~ and ^ in node modules 
• How do you build your application for production

ng build --prod
the bundles will be generated in dist folder

• What are polyfils

Polyfil scripts should be loaded for angular application to work on the supported browser .

• Explain angular binding Construct .

1. Interpolation
2. property binding
3. attribute binding
4. class binding
5. style binding
6. event binding

• What is XHR ?

XML Http Request built in object in browser to request data from server .

• How does angular safegaurd the app against XSS attacks ?

Cross side scripting is injecting malicious code in web pages gain access and steal data .Sanitization : Inspection of untrusted value and turing it value that is safe to insert in DOM. Security Constructs are as below

1. HTML 
2. style
3. URL
4. resource URL

• What is DomSanitizer ?

helps preventing the cross side .

1. Sanitize :
2. bypassSecurityTrustHtml
3. bypassSecurityTrustScript
4. bypassSecurityTrustStyle
5. bypassSecurityTrustUrl
6. bypassSecurityTrustResourceUrl

• How does hot reloading works internally?