Angular 9 Interview Questions and Answers
The release of Angular 9.0.0 is a significant one that spans the entire platform, which includes the framework, Angular Material, and CLI. This release helps in switching applications to the Ivy compiler and runtime by default and also introduces improved ways to test components.
If you are trying to make a career in Angular or are curious about what features and improvements you have come to the right place. We have compiled a list of the best Angular 9 interview questions to help you study and get a job in the same field.
Most Frequently Asked Angular 9 Interview Questions
In Angular dependency, injection is used to inject the dependencies of services. A Provider works as an instructor for the dependency injection system to resolve the dependencies. When you create any service, it comes with default @Injectable decorator that contains a default property 'providedIn,' which establishes the provider for service.
@Injectable({
providedIn: 'root',
})
export class DataService {
}
You can inject the services in the root or particular module as well, and you can limit the scope of service to a particular component by using component providers.
@Component({
providers: [DataService]
})
Here is a list of some of the new features in Angular 9
- JavaScript Bundles and Performance - A production build with Angular 8.2.7 resulted in a main.js of 246KB for ES2015 browsers. In Angular 9, this was reduced to 214KB, a 13 percent improvement from Angular 8.
- Ivy Compiler - Ivy yields much smaller JavaScript bundles, so Ivy solves Angular's bundle weaknesses.
- Selector-less Bindings - The Angular ViewEngine supports this pattern in the previous versions, but it was missing in Ivy's initial release.
- Internationalization - You can use the Angular CLI to generate the standard code necessary to create files for the translators. After configuring your app to use i18n, you can smoothly run the xi18n command for extracting the localizable text into a file.
| Angular | AngularJS |
|---|---|
| It's a modern web application framework built on Typescript language. | This is a frontend MVC framework built on Javascript language. |
| It is based on services/controller architecture. | It follows the MVC architecture. |
| In this, applications depend on controllers for managing data flow. | It is based on scopes and controllers, which are less reusable. |
| It is more flexible and stable than AngularJS. | It is challenging to manage and less flexible than Angular. |
| It is best suited for SPAs and complex round-trip applications. | It is best suited for maintaining and testing client-side applications. |
Many times you will have the requirement of sharing the data between components. It can be a parent to child, child to parent, and separate parts. So let's understand this with the help of an example.
Parent To Child Component - any data from parent to child component can be shared with the help of @Input decorator.
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: ``,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
parentMessage = "message from parent"
constructor() { }
}
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `Say {{ childMessage }}`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() childMessage: string;
constructor() { }
}
Child To Parent Component 1 - you can share the data from child
component to parent using @Output decorator.
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `Message: {{message}}`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `Send Message `,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hello Testing!"
@Output() messageEvent = new EventEmitter();
constructor() { }
sendMessage() {this.messageEvent.emit(this.message) }
}
Use the following command to generate a class in Angular through CLI.
ng generate class myClass [options]
The Tree Shaking function can be performed in both Renderer2 and the Ivy. In some cases where we have an imported function hidden by a false conditional, that function will also be included in the bundle, although it's never called for renderer 2.
On the other hand, Ivy breaks things down into smaller and more atomic functions. These functions make the renderer code a lot more friendly towards tree-shaking because they generate the code, which is necessary from the template you've written. As a result, you no longer ship the entire framework code; instead, only bundle pieces of the framework functionality that you use.
Services in Angular are singleton objects. This singleton objects only instantiate once during application lifetime. Moreover, Angular service retains the data throughout the application's life by using specific methods comprised of it.
Thus, Angular services share business, components, functions, and data with other parts of language and organizing an application. A controller directive can invoke the features of Angular service.
Below is a list of the performance updates made in Angular 9:
- We are binding the updated benchmark while also converting all the node-based parameter to be used as a testing harness.
- I was avoiding metamorphic reads during the process of property binding.
- Minimizing repeated lview reads inside the pipe instructions.
- Eradicating any unnecessary DOM reads in the styling instructions.
- Initializing TNode inputs/outputs on the very first creation pass for Ivy.
- The limit TNode.outputs reads for Ivy.
- The language-service keeps the analyzedModules cached when source files are not changed.
By default, Angular runs on port 4200. But this can be changed later on as per your usage.
In Angular 9, HostListener is a function decorator. Its job is to accept an event name as an argument and call the associated function when the same event gets fired by the host element.
Whereas, HostBinding in Angular 9 is used for binding the input properties in the host element towards the directive. With the help of HostBinding decorator, a directive can internally link property to the input property of the host element. When the internal property is changed or updated, the input property of the host element will automatically change.