Top Angular Interview Questions and Answers [Updated in 2021]

Introduction 

Many of you might be new to software development or have just learned HTML, CSS, and Javascript – looking to get into a framework and have heard about Angular but have little to no idea on the topic. So let me start off with what is Angular?

Angular is a front-end framework and is used to develop single-page applications. What I mean by single page browsers here is that one page gets loaded on your website and basically handles everything. 

Now the next question that generally comes to our mind is whether or not learning Angular is important? Is it worth it? Like I mentioned above, Angular is a Javascript framework that is used to build single-page applications (SPA’s).

These SPAs are responsible for communications with the back-end servers without refreshing the full webpage and hence provide a better user experience. So if you don’t like waiting too long for a full webpage to reload, then yes angular is absolutely worth learning!

The demand of Angular and different job roles

Javascript framework Angular is one of the most in-demand skills in the IT industry in 2021. Some very popular websites that use the Angular framework are Netflix, PayPal, The Guardian, Lego, JetBlue, Freelancer, Weather, and many more. 

If you follow the stats, you would know that Angular has been the most popular front end framework to create dynamic web pages for a long time now. Javascript has been the top used language on GitHub and StackOverflow and one of the main reasons for this is its popular framework Angular. 

If such a vast majority of developers are using this framework, there must definitely be a reason behind it. And the reason is the high app performance, cleaner code, reusability of code, easy updates and cross-platform compatibility of Angular framework. 

Coming to job stats, a lot of companies like Microsoft, Facebook, SAP, KPMG, Cognizant, Uber often ask Angular in interviews. The different job roles that you can aim in these companies are

• Front-end Developer
• Back-end Developer
• Full-Stack web Developer
• WordPress Developer
• Freelancer
• UI developer

Since, we have got it pretty clear by now that learning Angular can prove to be a turning point in our career and open a floodgate to many opportunities, let’s see some of the most asked Angular interview questions and their answers. 

Angular Interview Questions and Answers 

1. What is data binding? 

Data Binding is an important concept in Angular that helps in defining the communications between a web page component and a DOM. 

Data Binding is a process by which an internet user can manipulate the web page elements using a web browser. Mostly Data binding is used in web pages that contain interactive components like games, calculators, forms and tutorials. 

In simpler terms, Data binding keeps your web page up to date based on the state of your application. 

2. What is the difference between AngularJS and Angular?

We need to know that AngularJS and Angular are two different things. AngularJS uses Javascript whereas Angular uses Typescript language.  Coming to architecture, AngularJS supports model-view-controller design whereas Angular uses components and directives. 

One of the main points in favor of Angular is that AngularJS is not supported by mobile browsers whereas Angular is supported by all popular mobile browsers. 

Also, AngularJS is difficult to manage because of an increase in source code size, Angular is well structured, easier to create, and manages bigger applications. 

3. What are templates in Angular?

Angular templates allow you to define the UI of your applications. Angular-specific templates that are written in HTML contain Angular-specific elements and attributes. 

The prerequisites to learning template syntax is that you should be familiar with – HTML, CSS, and Javascript. 

With Angular syntax in your templates, you can extend the HTML vocabulary of the applications that you are building. One of the features is that Angular enables you to get and set DOM (Document Object Model ) values dynamically with features such as built-in template functions, variables, and data binding. 

4. What are directives in Angular?

Directives are attributes that allow the user to write new HTML syntax specific to the applications. These directives execute whenever the Angular compiler finds them in the DOM. 

Angular supports three types of built-in directives:

• Component Directives: These are the directives that come with a template and are the most common type of directives. 
• Attribute Directives: These are the directives that can change the appearance of a component, page or even other directives.

The following command is used to create an attribute directive:

ng g directive YellowBackground 

We can manipulate the generated directive to look like - 

import { Directive, ElementRef } from '@angular/core';

      @Directive({
       selector: '[appYellowBackground]'
      })
      export class YellowBackgroundDirective {
       constructor(el:ElementRef) {
         el.nativeElement.style.backgroundColor = "yellow";
       }
      }

• Structural Directives – These directives are responsible for changing the DOM layout either by adding or by removing the DOM elements. Every structural directive has a ‘*’ sign before them. 

Example of built-in directives in action:

<div *ngIf="isReady" class="display_name">
          {{name}}
      </div>


      <div class="details" *ngFor="let y of details" >
          <p>{{y.name}}</p>
          <p> {{y.address}}</p>
          <p>{{y.age}}</p>
      </div>

*ngIf is used to check a boolean value and if it’s truthy,the div element will be displayed.

*ngFor is used to iterate over a list and display each item of the list

5. What are annotations in Angular? 

Annotations in Angular are used to create an annotations array. They are the metadata set on the class used to reflect the metadata library. 

Note that they are different from Decorators. Annotations and Decorators are two very different, competing and incompatible language features to compile the @symbols that we often see attached to the angular components. 

6. Explain the difference between one-way binding and two-way binding? 

One-way binding	Two-way binding
The view doesn’t change or update automatically whenever there is a change in the data model. Custom code needs to be manually written to reflect changes.	UI or view is continuously updated automatically as the data model changes. The process is similar to the synchronisation process.
One-way data binding will bind the data from the component to the view (DOM) or from view to the component.	Two-way data binding in Angular will help users to exchange data from the component to view and from view to the component. It will help users to establish communication bi-directionally.
One-way data binding is unidirectional. You can only bind the data from component to the view or from view to the component.	It will help users to establish communication bi-directionally.

7. Explain the bootstrapping module? 

Every application has at least one angular module, and the root module that we bootstrap to launch the application is actually called the bootstrapping module. It is also known as the AppModule. AngularCLI generates the bootstrapping module.

It has a default structure as shown below:

```javascript
/* JavaScript imports */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

/* the AppModule class with the @NgModule decorator */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

8. How can you perform error handling? 

If the request fails to reach the server or fails on the server, then in this case HTTPclient will return an error object instead of a successful response. To handle this issue, we need to pass the error object as the second callback to the subscribe() method.

fetchUser() {
  this.userService.getProfile()
    .subscribe(
      (data: User) => this.userProfile = { ...data }, // success path
      error => this.error = error // error path
    );
}

Also, it is always useful and a best practice to give the user some meaningful feedback instead of a raw error message that is returned by the HTTPclient. 

9. What is AOT? 

AOT stands for Ahead of time. It is a type of compilation that compiles your application at build time. For AOT compilation, we need to include the –aot option with the ng build or ng serve command. 

• ng build –aot
• ng serve –aot

10. What are the advantages of AOT? 

AOT has a lot of benefits as mentioned below:

• AOT helps in detecting and reporting the template binding errors earlier, that is during the build step itself.
• It also helps in providing faster rendering. The browser downloads a pre-compiled version of the application. So it can render the application immediately without compiling the app.
• AOT also inlines external HTML templates and CSS style sheets within the application javascript which eliminates separate ajax requests. Thus, it overall gives fewer asynchronous requests. 
• AOT does not need us to download angular compilers. Hence it helps in drastically reducing the application payload. 

11. Can arrow functions be used in AOT? 

No, arrow functions cannot be used in AOT. Here is an example of a code snippet that is invalid:

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

We can fix this as follows:

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

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

12. How can we inject dynamic script in Angular?

We can inject dynamic HTML, script, URL in angular by using DomSanitizer. 

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
   selector: 'my-app',
   template: `
       <div [innerHtml]="htmlSnippet"></div>
   `,
})
export class App {
       constructor(protected sanitizer: DomSanitizer) {}
       htmlSnippet: string = this.sanitizer.bypassSecurityTrustScript("<script>safeCode()</script>");
   }

13. What are workspace APIs? 

Workspace APIs to make it easier for developers to read and modify the angular.json file instead of manually modifying it. We can enable or add optimisation build target as mentioned below:

import { NodeJsSyncHost } from '@angular-devkit/core/node';
import { workspaces } from '@angular-devkit/core';

async function addBuildTargetOption() {
    const host = workspaces.createWorkspaceHost(new NodeJsSyncHost());
    const workspace = await workspaces.readWorkspace('path/to/workspace/directory/', host);

    const project = workspace.projects.get('my-app');
    if (!project) {
      throw new Error('my-app does not exist');
    }

    const buildTarget = project.targets.get('build');
    if (!buildTarget) {
      throw new Error('build target does not exist');
    }

    buildTarget.options.optimization = true;

    await workspaces.writeWorkspace(workspace, host);
}

addBuildTargetOption();

14. Can you explain router imports? 

The Angular Router which represents a particular component view for a given URL is not part of Angular Core. It is available in a library named @angular/writer to import required router components. For example, we import them in-app module as below:

import { RouterModule, Routes } from ‘@angular/router’;

15. 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. 

Macros function- 
export function wrapInArray<T>(value: T): T[] {
  return [value];
}

Macros can also be used inside metadata as an expression. 
@NgModule({
  declarations: wrapInArray(TypicalComponent)
})
export class TypicalModule {}

The compiler treats the macros expression as written directly. 
@NgModule({
  declarations: [TypicalComponent]
})
export class TypicalModule {}

Frequently Asked Questions 

Key Takeaways

These were some of the most commonly and frequently asked conceptual Angular Interview Questions that every candidate must know before going to sit in an interview. So how many of these questions did you already knew? Doesn’t matter, what matters is that now you know them and will be able to answer and explain the concepts fluently to the interviewer! 

Angular is a fun framework and you can have so much fun and discover so many new things while working on this. We understand that preparing for interviews can be nerve-wracking and hope these Angular Interview Questions will help you during your interviews and you learn and grow in your role! 

By Yashvee Gupta