Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Data flow forms in Angular 8

When we are building forms in Angular, it is essential to understand how the framework handles data flowing from the user or programmatic changes. Reactive and template-driven forms follow two different strategies when handling form input.

Data Flow in Reactive Forms

In Reactive form, each form of elements in the view is linked to a form model (form Control instance). Updates from the view to the model and from the model to the view and synchronous. And aren't dependent on the UI rendering. The diagram below uses the same favorite color example to demonstrate how data flows work when an input fields value is changed from the view and then from the model.

data flow forms in angular 8

The steps of the data flow from view to model:

1. The user types a value in the input element; in the case, the favorite color is Blue.

2. The form input element releases an "input" event with the latest value.

3. The control value accessor attends for functions on the form input element immediately relay the new value to the FormControl instance.

4. The form control instance releases the original amount through the value changes observables.

5. Any subscriber to the valueChanges observable receives the new value.

data flow forms in angular 8 1

The steps of the data flow from model to view:

  1. The user calls the favoritecolorcontrol.setvalue method. Which update the form control value.
  2. Then the form control instance recovers the new value through the value changes observables.
  3. Then subscribers to the valueChanges observables receive the new value.
  4. At least, the control value accessor on the form input element update the elements in the new value.

Data Flow in Template-Driven Form

In template-driven form, each form element is linked to a directive that manages the form model internally. The diagram below uses the same favorite color example to demonstrate how data flows when any input field's value is changed into the view and from the model.

Data flow from View to model

data flow forms in angular 8 2

The steps in the data flow from view to model in reactive forms:

Here, the users have to change the input value from red to blue.

  • Firstly, the user types Blue in the input element.
  • Then, the input element produces an "input" event possess the value Blue.
  • Then, the control value accessor connect to the input triggers in the setValue() method on the FormControl instance.
  • The FormControl instance emits the new value by the value changes observable.
  • Any subscribers to the valueChanges observable obtain the new value.
  • The control value accessor also announce the Ngmodel.viewToModelUpdate() method which emits an ngModelChange event.
  • The component template uses two-way data binding for the favoritecolor property, the favoriteColor property in the component is updated in the value emitted by the ngModel! Change event (Blue).

Data flow from Model to View

data flow forms in angular 8 3

The steps in the data flow from model to view in reactive forms:

The data flow from model to see contained the following steps when the favoriteColor elements change from red to blue.

  • Previously, the favoriteColor is updated to a new value in the component.
  • Change detection creates.
  • During change detection, the ngOnChanges lifecycle hook has been called in the NgModel directive instance because the value of its inputs has changed.
  • The ngOnChanges( ) methods queue an async task to set the value to the internal FormControl instance.
  • Change detection is executed now.
  • Then, the task to fix the FormControl instance value is implemented.
  • The Fromcontrol instance emits the latest valueChanges observable.
  • Any subscribers to the valueChanges observable accept the new value.
  • The control value accessor updates from the input element in the view with the latest favoriteColor value.