Angular Interview Questions

The Angular template expression language supports three special template expression operators.

1. Pipe operator
2. Safe navigation operator
3. Non-null assertion operator

The pipe operator has a higher precedence than the ternary operator (?:). For example, the expression first ? second : third | fourth is parsed as first ? second : (third | fourth).

An entry component is any component that Angular loads imperatively(i.e, not referencing it in the template) by type. Due to this behavior, they can’t be found by the Angular compiler during compilation. These components created dynamically with ComponentFactoryResolver.

Basically, there are two main kinds of entry components which are following -

1. The bootstrapped root component
2. A component you specify in a route

A bootstrapped component is an entry component that Angular loads into the DOM during the bootstrap process or application launch time. Generally, this bootstrapped or root component is named as AppComponent in your root module using bootstrap property as below.

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent] // bootstrapped entry component need to be declared here
})

You can use ngDoBootstrap hook for a manual bootstrapping of the application instead of using bootstrap array in @NgModule annotation. This hook is part of DoBootstrap interface.

interface DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef): void
}

The module needs to be implement the above interface to use the hook for bootstrapping.

class AppModule implements DoBootstrap {
ngDoBootstrap(appRef: ApplicationRef) {
appRef.bootstrap(AppComponent); // bootstrapped entry component need to be passed
}
}

Yes, the bootstrapped component needs to be an entry component. This is because the bootstrapping process is an imperative process.

The components referenced in router configuration are called as routed entry components. This routed entry component defined in a route definition as below,

const routes: Routes = [
{
path: '',
component: TodoListComponent // router entry component
}
];

Since router definition requires you to add the component in two places (router and entryComponents), these components are always entry components.

Note: The compilers are smart enough to recognize a router definition and automatically add the router component into entryComponents.

Most of the time, you don't need to explicitly to set entry components in entryComponents array of ngModule decorator. Because angular adds components from both @NgModule.bootstrap and route definitions to entry components automatically.

No. In previous angular releases, the entryComponents array of ngModule decorator is used to tell the compiler which components would be created and inserted dynamically in the view. In Angular9, this is not required anymore with Ivy.

No, only the entry components and template components appears in production builds. If a component isn't an entry component and isn't found in a template, the tree shaker will throw it away. Due to this reason, make sure to add only true entry components to reduce the bundle size.

The Angular compiler is used to convert the application code into JavaScript code. It reads the template markup, combines it with the corresponding component class code, and emits component factories which creates JavaScript representation of the component along with elements of @Component metadata.

The @NgModule metadata is used to tell the Angular compiler what components to be compiled for this module and how to link this module with other modules.

The Angular compiler finds a component or directive in a template when it can match the selector of that component or directive in that template. Whereas it finds a pipe if the pipe's name appears within the pipe syntax of the template HTML.

The Angular core libraries and third-party libraries are available as NgModules.

1. Angular libraries such as FormsModule, HttpClientModule, and RouterModule are NgModules.
2. Many third-party libraries such as Material Design, Ionic, and AngularFire2 are NgModules.

Feature modules are NgModules, which are used for the purpose of organizing code. The feature module can be created with Angular CLI using the below command in the root directory,

ng generate module MyCustomFeature //

Angular CLI creates a folder called my-custom-feature with a file inside called my-custom-feature.module.ts with the following contents

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

@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class MyCustomFeature { }

Note: The "Module" suffix shouldn't present in the name because the CLI appends it.