Angular 5 Learning Experience — Part 6

Interpolation , property binding ,class binding,style binding,event binding(template reference),two way binding

Interpolation Syntax — {{exp}}

1. exp — can be a variable in component
2. can be a public method in component and return string {{expmethod()}}
3. {{window.location.href}} — cannot be accessed directly. Because global scope won’t be available in template. But through component method we can access

Property Binding -[getter]

Interpolation supports only strings. But if we want to manage booleans and other datatypes then need property binding

Ex: <input [disabled]=”propertybinding” value=”somevalue”/>

in your class

public propertybinding=true; which binds the property.

Class Binding — [class]=”property” , [ngClass]=”object”

<h1 [ngClass]=”styleclass”>text</h1>

public styleclass={“color”:blue;}

<h1 [class.text-danger]=”property”>text</h1>

<h1 [class]=”styleclass”>text</h1>

Style Binding -[Style.Color] ,[ngStyle]

<h1 [style.color]=”color”>text</h1>

<h1 [ngStyle]=”property”>text</h1>

Event Binding — ()

<button (click)=”function”> Click </button>

<button (click)=”function($event)”> Click </button>

Binding — # on an element

<input #bindingvar >

<input (click)=”somemethod(bindingvar.value)”> → This will pass dom element

Two way Data Binding —[( ngModel)]

Need to use FormsModule

<input [( ngModel)]=”nametobind”>

{{nametobind}}

Stay Tuned for next post