3. Data Binding in Angular

Data Binding in Angular

1. What is Data binding ?
1. Binding the model data between view and controller is called as Data Binding
2. In Angular Data Binding can be achieved in two ways:
   a. One Way Data Binding.
   b. Two Way Data Binding.

One Way Data Binding 
1. Binding the data from controller to view or view to controller is called
   one way data binding. 
2. One Way data binding is again classified into two ways
   a. Controller to View.
   b. View To controller.
Controller to view Data Binding 
1. Binding the data from controller to view is called controller to view
   data binding.
2. Controller to view binding is again classified into 5 types
   a. Interpolation.
   b. Property Binding.
   c. Attribute binding.
   d. Style Binding.
   e. Class Binding.
 View to Controller Data Binding 
1. Binding the data from view to controller is called View to controller 
   Data binding. 
2. Controller to view binding is again classified into 5 types
   a. Event Binding.
 Two way Data Binding 

1. Binding the model data between view and controller and controller to view 
   in parallel is called as Two Way Data Binding.
2. This two way data binding in angular can be achieved using ngModel.

Comments

Post a Comment

Popular posts from this blog

MVC or MVVC Pattern In Angular

Image
MVC or MVVC Pattern In Angular MVC - Model - View - Controller 1. In Angular every component will follow MVC pattern. 2. MVC indicate's - Model - View - Controller. 3. Model is the raw data or the data from remote. 4. View indicate's look and feel. 5. Controller acts as the mediator between Model and View. 7. In angular view can be achieved by HTML and CSS , Model indicates the object Controller indicates data transmission between View and Model. 8. In Angular each component will have all Model, View, Controller. So Angular is called Component based MVC. 9. In Angular it follow's two way binding i.e.. Data transmission between Model - view - view - controller hence it is also called as MVVC. 10. So angular can be called as MVC or MVVC. Files Indicating MVC in Angular. Model - component.model.ts View - component.html , component.css Controller - component.ts, component.service.ts Note There is still a dilama and debet weather angular i...
Read more

Angular 6 Template Driven Form Validations

Angular 6 Template Driven Form Validations 1. Create a form component. 2. Create an Angular Form  3. Validating Email and Password 1. Create Form Component Command : ng generate component templateForms --spec=false         The above command generate's following file's  1. template-forms.component.html 2. template-forms.component.ts 3. template-forms.component.css  Create one more file in the same folder as model file  4. template-forms.model.ts Now in the model file do the following  export class LoginForm { emailVal: string; passwordVal: string; } Description 1. In this model we are using 2 form input's which we need to send as a request 2. In model we define name of model and type of model if we don't have default Values. In template-forms. component.ts do the following <form #loginForm="ngForm" (ngSubmit)="login(loginForm)"> Email <br> ...
Read more

7. Class Binding

Image
Class Binding When we want to bind CSS classes either from typescript or class OR based on conditionals we can go with the concept of Class Binding. Class binding in angular can be defined in as follows : <element [ngClass]="condition or ternary or multiple CSS classes"> </element> ng class can be used in many different ways in angular which are as follows: 1. ngClass with ternary operator:  <element [ngClass]="condition ? 'class1' : 'class2'"> </element> from above when condition is true 'class1' will be applied to the element else 'class2' will be applied. 2. ngClass with condition in object format: <element [ngClass]="{'className': condtion}"> </element> When we have only one condition and one class to be applied we can use above syntax. 3. ngClass with multiple conditions in object format <element [ngClass]="{'class1': condition1, 'class...
Read more