In this article we are going to see a well curated list of angular interview questions 2021 and answers for experienced as well as freshers.

Why prioritize TypeScript over JavaScript in Angular?

TypeScript simplifies JavaScript code, making it easier to read and debug. TypeScript provides highly productive development tools for JavaScript IDEs and practices, like static checking. TypeScript makes code easier to read and understand. With TypeScript, we can make a huge improvement over plain JavaScript.

There are many more benefits of TypeScript over Javascript:

Consistency
Productivity
Maintainability
Modularity
Catch Errors Early

What is a Bootstrapping module in Angular?

Bootstrapping in Angular is a function component in the core ng module that is used for starting up the Angular application. By default the Appcomponent is the default component that will be bootstraped.

Below is the Default code for bootstrapping an angular application in app.module.ts

@NgModule({
    declarations: [
        AppComponent,

    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: []
})

What is the difference between Pure and Impure pipe in Angular?

A Pure Pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.

An Impure Pipe is called for every change detection cycle no matter whether the value or parameter(s) changes.

Below is an example of pipe and its decorator for setting pipe type

@Pipe({
 name: 'myCustomPipe', 
 pure: true    // true means this is a Pure Pipe and false means its and Impure Pipe (default is true)
})

export class MyCustomPipe {}

What is RxJS?

The full form of RxJS is Reactive Extension for Javascript. It is a javascript library that uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs.

RxJS is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. RxJS can be used with any other Javascript libraries and frameworks.

What is an observable?

Observables are simply a function that are able to give multiple values over time, either synchronously or asynchronously. You can also consider Observables as lazy Push collections of multiple values.

Observables provide support for passing messages between parts of your application. They are used frequently in Angular and are a technique for event handling, asynchronous programming, and handling multiple values.

We can subscribe to an observable and get values synchronously or asynchronously.

Below is an example of how to create and Observable:

var observable = Rx.Observable.create((observer: any) =>{

   observer.next("This is an Observable");

})

observable.subscribe((data)=>{
   console.log(data);    // output - "This is an Observable"
});

What is an observer?

Observers are just objects with three callbacks, one for each type of notification that an Observable may deliver.

An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next , error , and complete.

Below is an example of Observer and values retrieved after being Subscribed to it:

const observer = {
 next: x => console.log('This is next value: ' + x),
 error: err => console.error('Observer got an error: ' + err),
};

observable.subscribe(observer);

//OR

observable.subscribe(observer => {
  observer.next(10);
  observer.error("something went wrong");  
});

What are Angular Elements?

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.

Live Example of Angular Elements :- Angular Elements Working Example

The custom elements standard is currently supported by browsers like Chrome, Opera, and Safari. To be able to use it Firefox and Edge polyfills are available. The Angular Elements functionality is available with the package @angular/elements.

In order to keep track of all available custom elements the browser maintains a registry in which every elements needs to be registered first. In this registry the name of the tag is mapped to the JavaScript class which controls the behavior and the output of that element.

What is Angular Universal or Angular SSR?

Angular Universal is mechanism provided by Angular team by which you can render your single page angular application on server instead of Browser. Typical Angular applications are Single-Page Applications (aka SPA's) where the rendering occurs on the Browser. This process can also be referred to as client-side rendering (CSR).

Angular Universal is a very helpful and SEO friendly approach for modern web applications.

The Angular Universal provides 2 options:

Server Side Rendering : In this method the requested page will be completely rendered on server and send to the browser
Pre-Rendering : In this method you have to provide a list of routes you want to pre-render then by using the pre rendering command and the routes mentioned it will complete the Build with fully rendered HTML pages
To add Angular Universal to your project use below command:

ng add @nguniversal/express-engine

What are Service Workers in Angular?

Service Worker in Angular is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them.

Service Workers helps in improving your application's performance.

To add Service Workers in your Angular application use below command:

ng add @angular/pwa

Checkout this Article: It covers complete Steps to Add Service Worker in Angular Application

What is Lazy Loading in Angular?

Lazy Loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.

Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.

Below is an example route for a lazy loaded module:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'}
];

What is a Shared Module in Angular?

Shared modules in Angular helps you write more organized code in less time, helping you be more productive. Shared modules are an ideal spot to declare components in order to make them reusable. You won’t have to re-import the same components in every module—you’ll just import the shared module.

Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app.

Below is an example of a Shared Module:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { SharedRoutingModule } from "./shared-routing.module";
import { SharedComponent } from "./components/shared/shared.component";

@NgModule({
 declarations: [SharedComponent],
 imports: [CommonModule, SharedRoutingModule],
 exports: [SharedComponent]
})

export class SharedModule {}

What is DOM Sanitizer in Angular?

Dom Sanitizer in Angular helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

Below are the different methods Provided by Angular for Sanitization and make sure any user data is appropriately escaped for this security context.

//default sanitize data
abstract sanitize(context: SecurityContext, value: string | SafeValue): string | null

//sanitize html
abstract bypassSecurityTrustHtml(value: string): SafeHtml

//sanitize css
abstract bypassSecurityTrustStyle(value: string): SafeStyle

//sanitize scripts
abstract bypassSecurityTrustScript(value: string): SafeScript

//sanitize url
abstract bypassSecurityTrustUrl(value: string): SafeUrl

//sanitize resource urls
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl

Checkout other Articles in this series:

Part 1 of this series :- Angular Interview Questions Part 1

Part 2 of this series :- Angular Interview Questions Part 2

Part 3 of this series :- Angular Interview Questions Part 3