StacksJar
Made with 💖 by Arif Shaikh with all Passion.
Angular Interview Questions Part 2
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.
Part 1 of this series :- Angular Interview Questions Part 1
Part 3 of this series :- Angular Interview Questions Part 3
An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.
For this Angular provides two types of compilers JIT and AOT. JIT stands for Just in Time, and AOT stands for Ahead of Time.
The Angular ahead-of-time (AOT) compiler converts our Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.
We can use either JIT or AOT compiler for building our application.
//To use JIT compiler for Build run
ng build
//To use AOT compiler for Build run
ng build --prod
Like JavaScript expressions, Angular expressions can contain literals, operators, and variables. Unlike JavaScript expressions.
Angular expressions can be written inside HTML. Angular expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
Angular expressions support filters, while JavaScript expressions do not.
Observables:
Promises:
In software engineering, Dependency Injection is a technique in which an object receives other objects that it depends on. These other objects are called dependencies. The "injection" refers to the passing of a dependency (a service) into the object (a class) that would use it.
There are basically three types of dependency injection:
Model–View–ViewModel (MVVM) is a software architectural pattern that facilitates the separation of the development of the presentation layer (the view) – be it via a markup language or GUI code – from the development of the logical layer or back-end logic (the model) so that the view is not dependent on any specific model platform.
Below are the advantages and disadvantages of Angular.
Advantages of Angular:
Disadvantages of Angular:
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the component/directive is instantiated.
The ngOnInit() method is defined in a component class as below:
class MyComponent implements OnInit {
ngOnInit() {
// some code
}
}
View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa
The default ViewEncapsulation is Emulated, this view encapsulation emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. Angular adds the CSS to the global styles.
Angular provides there types of View Encapsulation. They are as follows:
The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.
Below is an example of Async pipe
<tbody *ngFor="let product of products$ | async">
<tr>
<td>{{product.Brand}}</td>
<td>{{product.Price }}</td>
<td>{{product.Provider}}</td>
</tr>
</tbody>
Exports all the basic Angular directives and pipes, such as NgIf, NgForOf, DecimalPipe, and so on. Re-exported by BrowserModule, which is included automatically in the root AppModule when you create a new app with the CLI new command.
Polyfills in angular are few lines of code which make your application compatible for different browsers. The code we write is mostly in ES6(New Features: Overview and Comparison) and is not compatible with IE or firefox and needs some environment setups before being able to be viewed or used in these browsers.
When we create a project with the ng new command, a src/polyfills.ts configuration file is created as part of our project folder. This file incorporates the mandatory and many of the optional polyfills as JavaScript import statements.
An Angular library is an Angular project that differs from an app in that it cannot run on its own. For example, to add reactive forms to an app, add the library package using ng add @angular/forms, then import the ReactiveFormsModule from the @angular/forms library in your application code.
If you have developed functionality that is suitable for reuse, you can create your own libraries. These libraries can be used locally in your workspace, or you can publish them as npm packages to share with other projects or other Angular developers.
Below is the command to create new Angular Library
ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib
A provider in angular is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide.
A provider is an object declared to Angular so that it can be injected in the constructor of your components, directives and other classes instantiated by Angular. A service is a particular type of provider that is declared with its class name, as you can see in the Angular tutorial.
Below is an example of providers usage in a app.module.ts file
import { NgModule } from '@angular/core';
import { UserService } from './user.service';
@NgModule({
providers: [UserService],
})
export class UserModule {
}
Reactive forms provide a model-driven approach to handling form inputs whose values change over time. Angular provides methods to create and update form controls, check progress using multiple controls in a group, validate form values, and create dynamic forms where you can add or remove controls at run time.
This is Live Example of Reactive forms in Angular :- Reactive Forms
Dynamic forms in angular allows us to make it faster and easier to generate different versions of such a forms, we can create a dynamic form template based on metadata that describes the business object model. Wr can then use the template to generate new forms automatically, according to changes in the data model.
The technique is particularly useful when you have a type of form whose content must change frequently to meet rapidly changing business and regulatory requirements.
This is Live Example of Reactive forms in Angular :- Dynamic Forms
Template-driven forms use two-way data binding to update the data model in the component as changes are made in the template and vice versa. Angular supports two design approaches for interactive forms. Template-driven forms are suitable for small or simple forms, while reactive forms are more scalable and suitable for complex forms.
This is Live Example of Reactive forms in Angular :- Template Driven Forms
Checkout other Articles on Angular Interview Questions series from below Links
Part 1 of this series :- Angular Interview Questions Part 1
Part 3 of this series :- Angular Interview Questions Part 3
Happy Coding!