Most frequently asked Angular 12 Interview Questions

1. What is Angular 12?
2. What are the Features and Benefits of Angular 12?
3. What are the improvements in Aungular 12?
4. How can we create a new interceptor?
5. What is Nullish Coalescing?
6. How can we generate components in a specific folder with Angular CLI?
7. How to style child components from parent component's CSS file?
8. Give an example of Angular 12, Spring Boot and MongoDB
9. What are the capabilities eyed for Angular 12?
10. Explain process of CLI?
11. How can we select an element in a component template?
12. How to use jQuery with Angular?
13. What are the commands used for executing in Angular?
14. How can we move @angular/normal/http to @angular/normal?

What is Angular 12?

Angular 12 is a TypeScript-based web framework arrived June 24 and can compiles supports shorthand property declarations and also fixes the compiler, compiler CLI, router and service workers.It also introduces APIs for opting into correct test teardown behavior.The compiler fixes pertain issues such as unterminated interpolation and view restoration, while the service worker fixes pertain to the naming, accessing, and clean-up of service worker caches.

What are the Features of Angular 12?

• Strict by default - Angular enables CLI as one of the feature in Angular 12.The strict mode is used for improving maintainability and assists us with catching the bugs early in the process.
• ng API improvements - The functionality have implemented namely getDirectiveMetadata and esetProfiler to debug APIs for structural inspection of applications.
• New Dev Tools - The profiler helps in previewing and recording the change detection events which can be monitored.
• Angular Universal - Angular supports proxy configuration in ssr-dev-server builder and has updated schematics to use defaultConfiguration.
• Changes in Tuple Types - Tuple are used as datatypes in programming where developers need to return outcomes from a function, they can be used as keys for dictionary-type word reference.
• Abstract Construct Signatures - TypeScript is used for utilizing theoretical modifier used for checking a class as an abstract.
• Nullish Coalescing - Used for assisting engineers with composing cleaner code in TypeScript and also can force highlights of this feature.
• Improvements to the compile process - Creating complex project and used as tendious and feasible for getting names of documents that TypeScript finds as a piece of the project.

What are the improvements in Aungular 12?

• Improved compiler CLI performance, incremental compilation is allowed in the presence of redirected source files.
• Used for nullishing coalescing and for writing clearer code in TypeScript classes, now works with Angular templates.
• Tools used for migrating legacy localization IDs to IDs using the latest algorithms.
• Webpack 5 module bundler is production-ready.
• Supporting IE11 browser has been deprecated.
• Transforming component style resources.
• Angular property completions are provided only in templates.

How can we create a new interceptor?

@Injectable()  
export class CacheInterceptor implements HttpInterceptor {  
   intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {  
      return next.handle(request);  
   }  
}  

What is Nullish Coalescing?

Nullish Coalescing acts as a logical operator which returns its right hand side operand when its left-hand side operand is null or undefined , and otherwise returns its left-hand side operand.

How can we generate components in a specific folder with Angular CLI?

D\HiddenWords>ng generate component plainsight

How to style child components from parent component's CSS file?

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

Give an example of Angular 12, Spring Boot and MongoDB

What are the capabilities eyed for Angular 12?

Capabilities eyed for Angular 12:
Support for inline Sass in components.
CLI use of strict mode by default for new projects.
A new version of the Ivy language service that provides improved type checking.
Tearing down the test module and environment after each test and the revision would significantly improve test speed.

Explain process of CLI?

How can we select an element in a component template?

import {Component} from '@angular/core';

@Component({
    selector:'display',
    template:`
     <input #myname (input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>
     `  
})
export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;
    }
}

How to use jQuery with Angular?

class MyComponent {
    constructor() {
        // how to query the DOM element from here
    }
}

What are the commands used for executing in Angular?

Commands used for executing are:
ng update @angular/cli
ng update @angular/core
ng update --all -force
npm install --force @angular/cli@12 @angular/core@12
npm audit fix -force

How can we move @angular/normal/http to @angular/normal?

/// Before
import {XhrFactory} from '@angular/common/http';
/// After
import {XhrFactory} from '@angular/common';