53 Angular 15 Interview Questions Answers [2022]

Table of Contents

Angular 14 Interview Questions:

Please bookmark this page and visit frequently as we are continuously updating this page with updates on recent angular 2/4/5 interview questions/answers collected from different companies and attendees.

From angular 2 version, angular framework is common in high-level, so angular 2 developers can also walk through the questions shared below.

Angular 14 Basics / Common Interview Questions:

1. What is Angular JS ?

Angular JS is a front end SPA (Single Page Application) framework, which provides more flexible way of developing the application with great fluid user experience.

2. Why we need Angular JS / React / Any front end JS frameworks ?

Because it is loosely couped with the backend, so any type of backend rest services can be called out from the angular services, where as the spring MVCs tightly coupled compare to angular js where view also should be in JSP/JSF/ any Java supported technologies.

As this is a great single page application framework, it provides awesome next generation user experience.

As angular js is a widely used for mobile end application developments, it beats other frameworks and stay front for many reasons including this.

3. What does Single page application really mean ?

Single page application is a quiet difficult term to understand with angular, it does not actually mean that only single page application can be developed using angular which all the new people/learners understands this term.

This actually mean that you will load your page only once and all the navigations will happen with in the same single page you have loaded at first time like in ajax to provide awesome experience.

In angular index.html is the only file served by server, that is the reason that it is called as single page application. All the other files (referred as components in angular) are served by angular.

4. What is the difference between angular and angular js ?

AngularJS refers version 1 of angular, this is the official angularjs (version 1) website. Remember angular 1 was actually developed using javascript.

Angular refers from version 2 to version 5(latest version at the time of writing this) and this is the official site of angular. This one is developed using typescript.

5. What is the difference between javascript and typescript ?

In highlevel difference between javascript and typescript is,

Javascript developed with ES5 standards and
Typescript developed with ES6 standards.

Please read this post to understand few other differences between javascript and typescript.

6. What is CLI / Angular CLI ?

Angular CLI is nothing but Angular command Line Interface, which provides the way to create and manage the angular application through command line interface only.

We need to have npm package manager installed to start working on angular command line interface.

Read here on how to install and run your first angular cli project,

How to install node js in windows 10 ?
How to install Angular-CLI in Windows 7 ?
Running First Angular-CLI Project in 2 Minutes

one another way is webpack, but I highly recommend you to start learning and working with angular cli for your angular cli projects. Because it is very easy and flexible, which also makes the development faster and better.

7. How angular works ?

In highlevel this is the flow,

Main.ts > AppModule > App.component, it serves the content available in the Template file.

I request you to run first angular cli project from this link,

Running First Angular-CLI Project in 2 Minutes

Please read here on angular flow/ how angular works in detail.

8. What is angular universal ?

Angular universal is package/platform which enables the angular sites more SEO friendly which basically serves all the contents from the server. Here we can actually see the complete source code of the page served rather than just seeing <app-root>.

But as per the google documents, google is improved to understand and provide better ranking to angular sites as well.

9. What are the bindings you know in angular ?

Event binding
property binding
Two way data binding

10. What is Two way data binding ?

Two way Databinding is nothing but tightly binding the model and the view variable, so whenever there is a change in the UI view, immediately model also be updated with the change and vice versa.

Just for understanding: Combining event and property binding is two way data binding.

Read here for two way data binding tutorial & example

11. What is String interpolation ?

String interpolation is basically used to output the values from the typescript file(class/component) to template(html) file. Whenever you want to dynamically display the values through backends/http requests/from DB then you can make use of this string interpolation to directly output your contents to templates.

Syntax: {{}}

Read here to know more about string interpolation

12. What is property binding ?

Binding html properties like disabled[disabled], class[ngClass] and style[ngStyle] dynamically with component properties is called property binding in angular. You can even create your own custom property using @Input.

Syntax:[] (any html properties inside the square brackets)

Read here for property binding tutorial & example

13. What is event binding ?

Event Binding in angular adds an event handler which will be triggered on the added event action.

Read here to for Event binding tutorial & example

14. What are directives ?

Directives are instructions in the DOM for angular. Components are also directives. Because components selector:’myComponentSelector’ also instructs the DOM runtime in angular to load the respective templates and typescript component files.

Example:

<p highLightMe>Text to be highlighted</p>

Here highLightMe is the directive.

@Directive annotation should be used to create our own directives.

@Directive({
selector: '[highLightMe]'
})
export class HighLightDirective{
// logic
}

Note: Directives can exist without templates also.

15. What is view encapsulation ?

16. What is @ViewChild ?

17. What are angular lifecycle hooks ?

Angular has 8 lifecycle hooks and these are,

ngOnInit() and ngOnDestroy() – called only once.
ngAfterContentInit() and ngAfterViewInit() – Called after the projected content and view has been initialized.
ngAfterContentChecked() and ngAfterViewChecked() – Called every time the projected content and view have been checked.
ngOnChanges() – Called after @Input property changes. (Bounded input properties)
ngDoCheck() – Called during all the change detection run.

All the above (onChanges, onInit, DoCheck etc..) should be imported from @angular/core.

Note: Directives will not have all the lifecycle hooks like components other ngOnInit and ngOnDestroy, because there is no view with directives.

This stackoverflow link will be able to help you to understand the order it loads during component initialization/load.

18. What is Pure and Impure Pipes ?

Built-in angular pipes are pure by default and good for performances as it is not running on every change detection cycle.

pure:false attribute can be used inside the @Pipe decorator to change the pure pipes to impure pipes.

Below custom pipe is the best example for impure pipes and it runs on every change detection cycles.

If suppose you are using a filter for some array and during the pipe execution if the array changed at the backend, array recent changes may not be captured with pure pipe, where as impure pipe catches the parallel changes during change detection cycle and reflects the result.

Angular pipe example – code snippet

@Pipe({name:'SimplePipe',pure:false})
export class SimplePipe implements PipeTransform {
transform(value:any) {
   return value.subString(0,5);
   }
}

19. Difference between directives and components in angular ?

Component:

Components can be created using @Component annotation.
<app-header></app-header>, here app-header is the component.
Components helps to split the application into smaller components.
Only one component can be used per DOM element. <app-header app-footer></app-header app-footer> can’t do like this and all.

Directive:

Directive can be created using @Directive annotation.
<button highLightMe>I log when clicked!</button>, here highLightMe is the directive.
Directives helps to design re-usable components. [highLightMe can be used in different tags to highlight the text present inside the tags].
Multiple directive can be used per DOM element. <p highLightMe boldMe></p> two different directive used for the same DOM element tag p.

20. Difference between renderer and elementRef ?

21. What is native element ?

22. List down the directives you know and used more.

We used *ngIf, *ngFor structural directives and ngClass, ngStyle attribute directives.

23. What is decorator and list down the decorators for module/components/directives/pipes/services.

Module – @NgModule
Component – @Component
Directive – @Directive
Pipe – @Pipe
Service – @Injectable

24. What is observable ?

25. What is the difference between observable and promises ?

26. What are the various ways to implement optimizations in angular ?

Shared memory
Lazy loading
AOT compilation
Css minification

27. What is shared memory ?

28. How do you call a service using plain / venilla javascript ?

29. How to pass the data between parent to child relationships?

@Input and @Output with EventEmitter can be used to transfer the data between the parent – child relationships.

An eventemitter will be able to transfer the data only to one parent level up. If we want to transfer between the components with various child levels then it is good to go with shared services / observable communication model.

Same can be done using eventemitter as well, but we need to create the eventemitter in every levels to help communicating it to their own parent levels.

30. How many times constructor and lifecycle hooks will be called when the same component called twice?

31. Ways to pass the values between component to component ?

Values can be passed between the components either through

EventEmitter with @Input() and @Output() [or]
Using shared services.

32. Explain lazy loading in detail. (What will be loaded component or module as part of lazy loading)

RouterModule.forChild(Routes) is used for lazy loading.

33. View child and its significance with element Ref ?

34. What is child routing and explain it’s implementations

35. How do you create your own pipe ?

Below are the steps to create the custom pipes in angular:

Create the typescript class with @Pipe decorator.
Implement PipeTransform from @angular/core.
Provide the implementation/business logic of your pipe in transform() method.
Use pipe:false if you need to convert your pure to impure pipes.

36. What is Ahead of Time Compilation ?

AOT or Ahead of Time compilation is another compilation technique like JIT (Just in Time compiler) to compile our typescript to browser understandable code and run our angular application.

Default JIT compiler performs TS to JS and JS to browser understandable code ondemand / or in browser only directly where as AOT does only JS to browser understandable code and renders the angular application.

Just before the demand TS to JS compilation completed in AOT compiler.

37. Can you list down the external dependencies you used with angular 4?

You can list down the external dependencies you used with angular, if you have not used anything then these are the few modules you can tell them,

Multi select dropdown in Angular 4 Example

Block UI in Angular 4 Example

Angular 4 Loading / Spinner ng-spin-kit component Example

Ngx-datatable with Angular 4 Example

38. What are the custom pipes you created ?

We can talk about how to create the custom pipes if you have not created anything in your project or yourself.

Below are the steps to create the custom pipes in angular:

Create the typescript class with @Pipe decorator.
Implement PipeTransform from @angular/core.
Provide the implementation/business logic of your pipe in transform() method.
Use pipe:false if you need to convert your pure to impure pipes.

39. What is webpack in angular ?

Angular uses webpack module bundler to bundle the source codes and also helps to load the code chunks from server to browser.

40. Difference between JIT (Just In Time Compilation) vs AOT (Ahead-of-Time Compilation) ?

JIT (Just In Time Compilation):

TS to JS and JS to Browser understandable code in browser.
Default compilation technique in angular.
No precompilation of TS to JS code.
Slower startup, as browser compiles and renders the output ondemand.
File size is larger compare to AOT as it has the compiler codes.
Recommended to use for developments.

AOT (Ahead-of-Time Compilation):

Only JS to browser understandable code in browser
Need to run with –aot (eg: ng build –prod –aot / ng build –aot) to enable AOT compilation in angular.
It precompiles TS code to JS code.
Faster startup, because browser does not compiles any codes, all are already done during AOT compilation itself.
File size is less, as it removes the unused stuffs/compiler things etc.
Recommended to use for productions.

41. Difference between Javascript and Typescript ?

These are few differences,

Javascript	Typescript
var myVar = ‘hello’; myVar = 10; console.log(myVar); // prints 10	let myVar = ‘hello’; myVar = 10; console.log(myVar) // we get the error here stating //Type ‘number’ is not assignable to type ‘string’
We dont have a type number only in javascript.	Typescript does not have float/double types, everything is considered as type number only (like 10, 11.2, 27.8000).
As types are not supported in javascript, explicit assignments will also be not possible.	Explicit assignment is possible let name:string = ‘javadomain’; let price:number = 100000;
We dont have any types like any, and also it even does not maintain the types internally based on the initialization assignments	we can have the variable with type ‘any’, then which is allowed to hold any types like string/number etc.
Javascript does not have type tuple object.	Tuples can be used to have the mixed type contents in an array.

**42. What is smart and dumb components ?**

A dumb component is not aware of what happens outside itself. It only receives input via property bindings and only emits output data as events.

Using smart and dumb components is a good practice. It greatly improves separation of concerns, making your application easier to understand and maintain. If your database or back-end API changes, you don’t have to worry about your dumb components. It also makes your dumb components more flexible, allowing you to reuse them more easily in different situations. If your application needs the same component twice, where one time it needs to write to a back-end database and another time it needs to write to an in-memory database, a dumb component allows you to accomplish exactly that.

43. What are all things to consider while selecting or picking the best angular component ?

This post explains the 6 different ways to consider selecting/picking the angular components available.

How to select the best angular components for your angular projects ?

44. How angular safe from XSS/CSRF/XSRF attacks?

Angular’s internal CookieXSRFStrategy and DomSanitizer classes are helping us to be safe XSS/CSRF/XSRF.

DomSanitizer takes care of removing the dangerous bits in order to prevent an XSS attack.

CookieXSRFStrategy takes care of preventing CSRF/XSRF attacks.

CSRF/XSRF protection is enabled by default on the client but only works if the backend sets a cookie named XSRF-TOKEN with a random value when the user authenticates.

Angular’s official documentation on security

45. Difference between RouterModule.forRoot(ROUTES) vs RouterModule.forChild(ROUTES) ?

46. What is the difference between Structural and Attribute directives ?

Structural directives:

It changes the structure of the DOM.
* is prefixed to the structural directives.
*ngIf, *ngFor are the examples of structural directives.

Attribute directives:

It just changes the appearance of the DOM.
It is not prefixed with *
ngClass, ngStyle are the examples of attribute directives.

47. What is the difference between Routes/Router and ActivatedRoute ?

48. What is canActivate and how it is helpful ?

49. What is the difference between Promise & Observable ?

Answer is explained in stackoverflow here.

50. What are new in Angular 6/Angular 7/Angular 8/Angular 9/Angular 10/Angular 12/Angular 14 ?

This question may be asked for any version which interviewer looking for. Below is the answer for whats new in Angular 6. Additionally you can prepare based on the Job Description Angular version or latest angular version features and improvements you can prepare yourself.

No more .angular-cli.json file, the same is moved to angular.json file.
Rxjs5 is updated to Rxjs6, this is one of the critical change which needs code changes in many places.
- The existing projects can still update along with this [npm install –save rxjs-compat] and run it in angular 6.
First release of Angular Elements released as part of Angular 6.
Update from one version to another angular version can be found here. (This is helpful to migrate the older angular project to newer angular project).

51. What is package.json & what it contains ?

52. What is angular.json and what this file contains ?

53. How do you make sure your code is properly written in Angular 14 ?\

Explain any sample and simple karma test cases and talk about the junits and also you can add you will always run ng lint to ensure “All files pass linting”.

ng lint

Angular 14 Quiz:

Angular Basics/Common Quiz

These below questions are asked in Angular interviews of the popular MNC Companies like Cognizant, Wipro, Renault Nissan, TCS etc.

Few may be already covered in the above 50 questions, few may be not exactly related to Angular but may be for typescript/javascript/css questions, but attaching all the questions below for your better preparations.

Angular important features
What is scope in angular
How mvc pattern works in angular
What is router in angular?
Service side validation in angular,
How hacking can be avoided theiugh developed tools
Bootstrap fluid or material?
Why are using typescript in angular 4 instead of JavaScript?
How all typescript components togethered?
What is single page application? And how angular works with only one
How do you install dependent packages on angular
How typescript is converted to JavaScript internally?
var/let/default keyword difference and variable scopes
‎closure function
‎pure vs impure pipes
‎angular life cycle
‎difference between directives and components
‎difference between renderer and elementref
‎what is native element?.
‎list down the directives you know and used.
‎what is decorator and list down the decorators for module, component, directive, pipe and services
‎what is observable
‎difference between promises and observable
‎ways to do optimizations in angular?
Shared memory
Lazy loading
AOT compilation
Css minification
What is shared memory in angular?
‎how do you call a service using venilla JavaScript?
Parent to child – @Output and child to parent – @Input
How many times constructor and lifecycle hooks will be called when the same component called twice
Angular/jQuery/nodejs/backbone – what is your option and reason for it
What tool have you used for UI debugging
Bootstrap grid question
How do you make a page responsive
How do you make componts communicated in angular?
Steps to create custom directives in angular.
What are the different types of prototypes in javascript
What is the difference between async and await
What is view port
Media query types
Canvass vs svg difference
How do you perform http Restful calls from angular
Observable vs promises difference
Angular lifecycle hooks
What is namespace
Difference between pure and impure pipes
@Input vs @Output
Angular lifecycles
In typescript component what is the right place to call http calls.
What is the difference between angular 2 and angular 6
What are the types of angular forms
What is reactive form and it’s best use case
What is lazy loading
What is canActivate
How to disable nested routings using canActivate?
What are all the set angular cli commands you have used
What is event binding, property binding and two way binding and how each differs from one another
How @Injectable works internally
How do you compare two objects in typescript
Best way to compare object references in typescript
What are the features of typescript you have used
How do you use bootstrap with angular
What is view encapsulation in angular?