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