The process of synchronizing a model with a view is known as Change Detection. Even when utilizing the ng Model to implement two-way binding, which is syntactic sugar on top of a unidirectional flow. Change detection is incredibly fast, but as an app’s complexity and the number of components increase, change detection will have to do more and more work. 

Change Detection Mechanism-moves only ahead and never backward, beginning with the root component and ending with the last component. This is what one-way data flow entails. The tree of components is the architecture of an Angular application. Each component is a child, but the child is not a parent. A $digest loop is no longer required with the one-way flow.

What is a bootstrapping module?

Every application contains at least one Angular module, which is referred to as the bootstrapping module. AppModule is the most popular name for it.

Example: The following is the default structure of an AngularCLI-generated AppModule:

import { BrowserModule } from '@angular/platform-browser';

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

import { FormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

FormsModule,

HttpClientModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Explain MVVM architecture

MVVM architecture consists of three parts:

• Model contains the structure of an entity. In simple terms it contains data of an object.

• View is the visual layer of the application. It displays the data contained inside the Model. In angular terms, this will be the HTML template of a component.

• ViewModel is an abstract layer of the php widgets for websites application. A viewmodel handles the logic of the application. It manages the data of a model and displays it in the view.

View and ViewModel are connected with data-binding (two-way data-binding in this case). Any change in the view, the viewmodel takes a note and changes the appropriate data inside the model.

How do you choose an element from a component template?

To directly access items in the view, use the @ViewChild directive. Consider an input item with a reference.

<input #example>

and construct a view child directive that is accessed in the ngAfterViewInit lifecycle hook

@ViewChild('example') input;

ngAfterViewInit() {

console.log(this.input.nativeElement.value);

}