Angular 2 [PART-6 ] Display Content (Different Methods ) From Component

Each Component have View Part (.html file) and typescript file ( .ts )  file then how to display data from typescript?. for this we use different binding technologies and looping functionalities , and in advanced we can use filtering technologies  we will discuss later .

How to display variable in view  ?

In first and simple step

we can declare a variable title

 title = 'This  is my first variable ';  

and we can display variable in html page by using interpolation 

 {{title}} 

then text will be display in your html view

note interpolation work with html attributes 

ex: <img src=”hppp://shabeen.in/{{imagePath}}”/>

How to Use Property binding

First of all what is property binding

Property binding is the same thing as interpolation, except you can set the properties and attributes of various HTML elements.

example

<img [src]=’imagePath’/>
//non stream data value
use in <button [disabled]=’isDisabled’ ></button>
not Property binding work with DOM property ex:Disable

Attribute Binding
Bind other than dom element ex : col-span

 attr.colspan="{{columnSpan}}" or [attr.colspan]='columnSpan' 

Class binding

 

Using Class binding we can create dynamic classes properties . so we can add remove or replace all by one class like properties

Example
<button class=”boldClass” [class]=’className’ > //Replace all CSS

====================================
in .ts appyBoldClass: Boolean :true;
====================================
Add specific class using class binding
<button class=”italicClass” [class.boldClass]=’appyBoldClass’ >

remove specific class using class binding
<button class=”italicClass boldClass” [class.boldClass]=’!appyBoldClass’ >

Style Binding

=============================
in .ts        isBold: Boolean=true;
=============================
<label [style.color]=”isBold ? ‘#ff0000’ : ‘#000’ “>Salary Details</label>

Here we check data from typescript isBold then class apply only if isBold is true so we can manage class from component ( typescript file )

 

Event Binding

Event binding allows you to define events that occur in the template (user-initiated), and communicate to the component class.

we use event binding in listemployee component for Show /Hide property of salary Details (check listemployee.component.html)

 

Angular ngFor directive (ngFor)

ngFor directive Used to display list of data , we used ngFor for display Employee list in employee App , details for ngFor directive discuss in next PART