Angular Interview Questions and Answers

In this blog, I have prepared a set of questions and answers related to Angular which are very important from the point of the interview.

The Angular interview questions given below is based on version 8 and 9 of Angular.

What is Angular?

Angular is a well known powerful web application framework in use today. To provide a better stability and highly optimized web application, Angular has released multiple versions time to time.
For more about Angular introduction, please visit this link - Angular Introduction

Below are the versions of Angular

Version Release Date LTS (Long term support)
10 Jun, 2020 Yes
9 Feb, 2020 Yes
8 May, 2019 Yes
7 Oct, 2018 No
6 May, 2018 No
5 Nov, 2017 No
4 Mar, 2017 No

What is TypeScript?

TypeScript is a typed super-set of Java Script that compiles the code into JavaScipt. In order to work with TypeScript, first you have to install node package manager from npmjs.com Once npm installation done, open command prompt and type below command. 

 npm install -g typescript - This command will install TypeScript globally to your system. 

 
To check version tsc --version - This will show you the installed version of TypeScript. Learn TypeScript

Angular CLI Commands

Below are few Angular CLI commands that are useful while developing an Angular Application. To install Angular CLI

npm install -g @angular/cli
To get online help
ng help
To get detailed help of a command
ng [command name] --help
To get Angular version details
ng --version

For more list of Angular CLI commands, please visit this link - Angular Cli Commands

What are Components in Angular Project?

Component is the basic building block of an Angular application. Any web page you see in Angular is a component. Any Angular project is the collection of multiple components. A component is a part of a module within Angular project. 

 A component is mainly a collection of 4 files - .Html, .ts, .scss, .spec.ts A single component is responsible for handling a single view. 

 An angular project must have at least one component. When creating a new project we have a component file named app.component (app.component.ts and app.component.html) 

 To add a new component within your Angular project, run below command - ng g c Whenever we create a new component, it is defined in its respective module file.

What is Module?

The basis of any angular project is a Module. Simply, the Module is a collection of components. By default, in every Angular project, there is a Module file called root module (app.module.ts) 

Multiple modules can be created within a single Angular application. Suppose that you are working on a project that is very big and complex. 

 In such a project or application, you will need more than one Module file, so that your application will be simple and well maintainable. 

 For eg - You can create a module for Customer, another module for Admin and so on. You can create componets for your customer within Customer module and components for admin section within Admin module. To add a new module within your project, run below command - ng g m

What is Directive in Angular?

It is one another important interview question. Directives in Angular extend the use of HTML by adding custom behavior. In this blog, we will see the use of directives in Angular. There are 3 types of directives in Angular -

  • Component Directives: Components are the most common directives among all. We can not create an Angular app without component directives. Naming conventions of a component in Angular app is .component.ts
  • Structural Directives: Structural Directives make changes in DOM by altering DOM elements. Structural directives in Angular starts with *
  • Attribute Directives: Attribute directives make changes in appearance and behavior of an element or component.
Visit this link to know more about Directives in Angular - Directives in Angular

Explain ngIf, ngSwicth, ngFor directives

ngIf, ngSwicth, ngFor are structural type of directives as these directives make changes in DOM by modifiying the DOM elements. Click Here to know more about Angular Directives.

What is Interpolation in Angular?

Interpolation is a way to bind a value in a component's template. For eg - {{Property_Name}} In Component.ts file

export class TestComponent implements OnInit {
  message: any;
 
  constructor( ) { }

  ngOnInit() {
     this.message = 'Hello to Angular'
  }
In template file -
{{message}}

What is Event Binding in Angular ?

Event binding enables the template file to listen for keypress, mouseclick, touches etc.

 <button (click)="ShowAlert()">Show</button>
    Or you can use like this-
    <button on-click="ShowAlert()">Show</button>

What are Pipes? Use of Pipes in Angular with examples.

Pipes in Angular transform the data before it display it to view. Angular offers built-in pipes and custom pipes as well. To apply pipe Angular uses | symbol before any pipe. Syntax to use pipe in Angular - {{| }} Few buil-in pipes are - lowercase, uppercase, date etc...

How to create Custom Pipes?

If your requirement is full filled with built-in pipes then use them else you may create custom pipes to full fill business requirement. First we have to generate files to work with custom pipe. To do this use below command ng g p Create a pipe with name add which will do addition for given value and parameter. To generate custom pipe with name add, we will use below command.

ng g p add
Once we have generated the custom pipe files, we will modify the code as per our requirements. Open add.pipe.ts file in editor and make changes in transform() method.
export class AddPipe implements PipeTransform {

  transform(value: number, args: any): any {
  
  if(args)
  {
  return value + args;
  }
  else return value;
  }
  }
Import this pipe in respective module -
import { AddPipe } from './pipe/add.pipe';
Add this pipe in decalaration as well in module file. Now use below line in your conmponent and run the project to see the outpout.
{{10 | add:5}}

Explain Routing in Angular

Routing means navigating from one page to another page in an application. While creating a new Angular project through CLI, it ask 'Would you like to add Angular routing? (y/N)' Once you select yes, it creates a app-routing.module.ts file in src-> app folder. We have to define all the routes in Routes in routing module file. Routes is an array of route configuration.

const routes: Routes = [
  {
    path: 'demo1',
    component: Demo1Component
  },
  {
    path: 'add-product',
    component: AddProductsComponent
  },
];
For more details on Angular Routing, please visit our blog - Routing in Angular

What is Route Guard in Angular?

Route guards in an Angular application facilitates to block a particular route based on user authentication or on some extra permissions. Use below command to create a route guard -

ng g g /guard/userguard
Import the newly created route guard in your module file. and add the routeguard name in providers array in module file. Now, define the route with route guard in app-routing.module.ts file
{path:'dashboard',component:DashboardComponent,canActivate:[UserguardGuard]}
Above route says, DashboardComponent can only be displayed if canActivate method of Userguard returns true. In routeguard file, check the condition, if it is matches the specified condition then return true else navigate to access denied page and return false. For more details on route guard, please visit this link - Route Guard in Angular

What are differences between Template Driven Form and Reactive Form approach?

In template-driven approach, Forms input and Forms validation logic goes into component's html file only. Template-driven approach is fine for small or medium level project. 

 
In the Reactive Form approach the validation function is written in component class. And Angular call this function whenever there is a change of value in the input control. Reactive Form Approach is the best practice if we are working on a large and complex Angular application. For more details about Template Driven Form and Reactive Form approach, please visit this link - Template-driven and Reactive Forms approach

What is FormControl and FormGroup?

  • FormControl: All input fields defined in HTML template are the instance of FormControl.
  • FormGroup: It is an instance of a set of FormControl is referred as FormGroup
For more details about FormControl and FormGroup, please visit this link - FormControl, FormGroup and FormBuilder

What is FormBuilder Service in Angular

FormBuilder service uses group() method which takes an object with control name as key. To use FormBuilder in Angular project, first import FormBuilder from angular/forms as shown in below code snippet.

import { FormBuilder } from '@angular/forms';
  
   addProductForm = this.formBuildr.group(
    {
      productName: [],
      productCategory: [],
      productDetails: [],
      productCost: []
    }
  );
For more details about FormBuilder Service, please visit this link - FormControl, FormGroup and FormBuilder

What is FormArray in Angular?

FormArray is the collection of FormControl, FormGroup or FormArray. To use FormArray in Angular application, you have to import it like this -

import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
  productForm: FormGroup;
  products: FormArray;
addProductItem(): void {
  this.products = this.productForm.get('products') as FormArray;
}
    <div formArrayName="items"
         *ngFor="let p of productForm.get('products').controls; let i = index;">
        <div [formGroupName]="i">
            <input formControlName="pname" placeholder="Product name">
            <input formControlName="details" placeholder="Product details">
            <input formControlName="cost" placeholder="Cost">
        </div>
    </div>

What is HttpClient?

HttpClient is available in '@angular/common/http' and it offers a way to communicate with an API. HttpClient uses XMLHttpRequest that supports all the latest browsers to communicate with an endpoint. HttpClient uses RxJS observables which allows the Angular app to handle asynchronous operations.
For more details about Http Client, please read below blogs -

What is Observable in Angular?

It is one of the most asked question in Angular interview.

Observable is available with the RxJS library. Angular uses Observable to implement the asynchronous process. Observable gets executed when a consumer calls Subscribe() function.
For details about Observable, please check this blog - Angular CRUD example with .Net Web API

Hope these Angular interview questions and answers are helpful to you. 

Please share this within your community and comment below in case you have any feedback.

Comments