Data Binding in Angular

Data Binding: Binding values in properties defined in models or type scripts file comes under data binding of Angular CLI. Here I defined few variable like title, employee name in

sharjeels-work.component.ts file.

To display values assigned these property you need to write both propery in htmls file with {{ PropertyName}} as below.

To verify the changes you just build your angular app and serve the application. Once you hit the URL http://localhost:4200/sharjeels-work

I am trying to add more properties in model and bind them on UI with little logics like dropdown- selected change event and button click.

export class SharjeelsWorkComponent implements OnInit {

 

  constructor() { }

  ngOnInit() {

  }

  title = 'Data Binding In Angular 6';

  employeeName = "Affan Baba";

  // declared array of birthday months.

 lstBirthdayMonths = ["January", "Feburary", "March", "April", "May",

 "June", "July", "August", "September",

 "October", "November", "December"];

 isAvailable =false;

 myClickFunction(event) {

  alert("Button is clicked");

  console.log(event);

}

changemonths(event) {

  alert("Changed birthday month from the Dropdown");

 

}

To bind all these properties to UI just add below code in your htmls file.

<p>

 

 {{title}}

 

 

</p>

<p>{{employeeName}}</p>

<div> Select Birthday Month :

  <select (change) = "changemonths($event)">

     <option *ngFor = "let i of lstBirthdayMonths" itemid="sampleItem" id="{{i}}">{{i}}</option>

  </select>

</div>

<span *ngIf = "isAvailable; then condition1 else condition2">

  Condition is valid.

</span>

<ng-template #condition1>Condition is valid-True</ng-template>

<ng-template #condition2>Condition is invalid-False</ng-template>

<button (click) = "myClickFunction($event)">Click Me</button>

<a routerLink = "sharjeels-work">New component</a>

<router-outlet> </router-outlet>

Now build your app using ng build and serve with ng serve. After successfully serve your application a dropdown and button will be displayed on your html page.

In this article you learn data binding and few knowledge on event binding. I will try to share more on Angular in my next articles.

Happy Learning!!!