5. Property Binding in Angular

Property Binding in Angular

What is Property binding ?

1. It is one type of one way data binding from Controller to View but can be used on the properties of HTML elements. 

2. This binding can not be used between the HTML elements like interpolation to display the value's.

3. This can be indicated using [propertyName] ="Variable in controller".

Explanation with a sample program

Create a component using following command

      1. Open command prompt or Terminal in Visual studio and type
          
                 ng generate component sample --spec=false

The above command creates 3 files
 (a). sample.component.html

 (b). sample.component.ts

  (c). sample.component.scss  

Code in sample.component.html

<input [type]="typeValue" />      

sample.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss']
})
export class SampleComponent implements OnInit {
  typeValue = 'password';
  constructor() { }
  ngOnInit() {
  }
}   

Explanation

1. The typeValue inside the controller will bind to "type" property of the input field.
2. As "typeValue" given is password the field renders with "password" type. 
3. If the "typeValue" does'nt match with any of properties given by HTML it will render the default value of the property.     
4. Where ever "typeValue" changes in a controller it effects the HTML content. 

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