Most Common Angular Interview Questions :
- What is Angular ?
- What are the building blocks of Angular ?
- How does Angular Application starts ?
main.ts -> platformBrowserDynamic().bootstrapModule(AppModule) -> AppModule
- What is a component ?
- What is a template ?
Two types are there
1. within the component.ts enclosed in back tick
2. in a separate html file .
- How to style a component ?
2. in a separate css using styleUrl
3 . multiple css files can be included using styles [] .
- What is providers for component ?
- Explain model to view binding ?
[] property binding : a known property of html element is bound to a variable defined in component .
- Explain view to model binding ?
- Explain two way binding ?
eg : <input [(ngModel)] = "myInput" > <span >you entered {{myInput}} </span>
- What is a module ?
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 ?
- 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 ?
we can also use @Input to get the input in the specified property .
- How to create custom structural directive ?
- How to pass data from parent and child component ?
- How to pass data from child to parent component ?
- Using @ViewChild(Component class) add to a variable of Child component in parent component
- Using @Output and EventEmitter .eg : @Output() voted = new EventEmitter<boolean>(); this.voted.emit(agreed);
- How to pass data between unrelated component ?
- What is LifeCycle hook?
- ngOnChanges()
- ngOnInit()
- ngDoCheck()
- ngAfterContentInit()
- ngAfterContentChecked()
- ngAfterViewInit()
- ngAfterViewChecked()
- ngOnDestroy()
- What is a service ?
- What is dependency Injection ?
- constructor injection :dependencies are made available through constructor
- property injection :directly setting the object property .
- What is @optional
- What is injector?
- Explain Hierarchical injector.
- What is a provider ?
is an instruction to the DI system on how to obtain a value for a dependency .
- What is view provider
- How to create a service ?
- When to use @providedin : root ?
- What is routing?
- How to add routing to an angular app?
- What is RouterLink directive ?
- What is redirectTo ?
- What is useHash:true
- 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 ?
CanActivate
CanActivateChild
CanDeactivate
CanLoad
Resolve
Handles user data . 2 Types :- What is form ?
- Template driven :
- Model Driven /Reactive
- Explain Template driven form .
- two-way data binding : ngModel , ngModelGroup
- change tracking: pristine, dirty , valid
- validation : required , pattern , minlength
- 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?
- What is view encapsulation ?
- ViewEncapsulation.Native : lets angular to use the shadow DOM . isolates the component , default styles will not be applied to this component .
- ViewEncapsulation.Emulated : applied by default
- ViewEncapsulation.None : the styles defined for this component is applied to all other component .
- Diffentiate observable and promise.
- Promise is executed immediately, observable is lazy and executes only if it is subscribed.
- Observable can be cancelled, promise can't.
- 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.
let promise = new Promise((resolve, reject) => {
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 .
let promise = new Promise((resolve, reject) => {
//http call
});
return promise;
the bundles will be generated in dist folder
- What is transpilation ?
- Build time : takes the type script files and compiles it to javascript files
- 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?
- What are the special characters in angular ?
- [] : property binding
- {{}} : interpolation
- () : event binding
- [()] : two way binding
- | : pipe
- * : structural directive
- ? : safe navigation
- # : template reference variable
- Explain folders in angular project ?
- e2e : contain end to end tests
- src : application code
- assets : static content like images .
- environments : configuration for developer and production environments .
- Explain the important files in Angular .
- package.json
- angular.json
- main.ts
- tslint.json
- tsconfig.app.json
- 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
the bundles will be generated in dist folder
- What are polyfils
- Explain angular binding Construct .
- Interpolation
- property binding
- attribute binding
- class binding
- style binding
- event binding
- What is XHR ?
- How does angular safegaurd the app against XSS attacks ?
- HTML
- style
- URL
- resource URL
- What is DomSanitizer ?
- Sanitize :
- bypassSecurityTrustHtml
- bypassSecurityTrustScript
- bypassSecurityTrustStyle
- bypassSecurityTrustUrl
- bypassSecurityTrustResourceUrl
- How does hot reloading works internally?
