Class Binding in Angular

 Example  Iteration for even and Odd Properties

Apply a CSS Class to a table row over iteration.

Syntax:

<tr class="className>

[class.ClassName]=true/false

Add a new Component

ng g c datatable

Goto datatablecomponent.ts and write the below code

@Component({

  selector: 'app-datatable',

  templateUrl: './datatable.component.html',

  styleUrls: ['./datatable.component.css']

})

export class DatatableComponent {

public products =[

  { Id:1, Name:'Samsung TV',Price :5669},

  { Id:2, Name:'Sony TV',Price :6669}

];

public txtName: any;

public txtPrice:any;

public id=this.products.length;

public confirmDelete:any;

public AddProducts() {

  this.id++;

  this.products.push( {Id:this.id,Name:this.txtName,Price:this.txtPrice});

  alert('Record Inserted');

  this.txtName='';

  this.txtPrice='';

}

public DeleteProducts(index:any) {

  this.confirmDelete=confirm('Are you sure, want to Delete ?');

  if(this.confirmDelete==true)

  {

    this.products.splice(index,1);

  }

}

}

ScreenShot

.CSS File Changes

.odd

{

    background-color: darkblue;

    color: white;

}

.even

{

    background-color: darkgreen;

    color:white;

}

.headerstyle

{

    background-color: red;

    color:white;

}

ScreenShot

.Html changes

<fieldset>

    <legend> Add Products </legend>

    <dl>

        <dt>Name</dt>

        <dd> <input type="text" [(ngModel)]="txtName"></dd>

        <dt>Price</dt>

        <dd> <input type="text" [(ngModel)]="txtPrice"></dd>

    </dl>

    <br/>

    <button (click) ='AddProducts()' >Add Product</button>

</fieldset>

<h3> Products List</h3>

<table width="400" border="1" >

    <thead class="headerstyle">

    <th> Product Id</th>

    <th> Name </th>

    <th> Price </th>

    <th> Action </th>

</thead>

    <tr [class.even]="even" [class.odd]="odd" *ngFor= "let item of products; let i=index; let odd=odd;let even=even">

    <td> {{ item.Id}}</td>

    <td> {{ item.Name}}</td>

    <td> {{ item.Price}}</td>

    <td> <button (click)= 'DeleteProducts(i)'> Delete </button> </td>

    </tr>

</table>

ScreenShot

appModule.ts

Index.html

Note: we need to add FormsModule in appmodule.ts. Reason is it is a module,

required for "ngModel".

Output

Binding Form Data in angular

 The data defined in the form element can be accessed and used in controller by using various techniques.

1 Interpolation 2 Two way binding

In Interpolation technique , the reference for form element is defined by using "#" and a value property is used to refer the element value

Syntax:

<input type="text"  #uname> { {uname.value }} 

Dealing with Forms

Example: Accessing Index over iterations

Add a new Component

ng g c datatable

Goto datatablecomponent.ts and write the below code

@Component({

  selector: 'app-datatable',

  templateUrl: './datatable.component.html',

  styleUrls: ['./datatable.component.css']

})

export class DatatableComponent {

public products =[

  { Id:1, Name:'Samsung TV',Price :5669},

  { Id:2, Name:'Sony TV',Price :6669}

];

public txtName: any;

public txtPrice:any;

public id=this.products.length;

public confirmDelete:any;

public AddProducts() {

  this.id++;

  this.products.push( {Id:this.id,Name:this.txtName,Price:this.txtPrice});

  alert('Record Inserted');

  this.txtName='';

  this.txtPrice='';

}

public DeleteProducts(index:any) {

  this.confirmDelete=confirm('Are you sure, want to Delete ?');

  if(this.confirmDelete==true)

  {

    this.products.splice(index,1);

  }

}

}

ScreenShot

.html changes

<fieldset>

    <legend> Add Products </legend>

    <dl>

        <dt>Name</dt>

        <dd> <input type="text" [(ngModel)]="txtName"></dd>

        <dt>Price</dt>

        <dd> <input type="text" [(ngModel)]="txtPrice"></dd>

    </dl>

    <br/>

    <button (click) ='AddProducts()' >Add Product</button>

</fieldset>

<h3> Products List</h3>

<table width="400" border="1" >

    <th> Product Id</th>

    <th> Name </th>

    <th> Price </th>

    <th> Action </th>

    <tr *ngFor= "let item of products; let i=index">

    <td> {{ item.Id}}</td>

    <td> {{ item.Name}}</td>

    <td> {{ item.Price}}</td>

    <td> <button (click)= 'DeleteProducts(i)'> Delete </button> </td>

    </tr>

</table>

ScreenShot

appModule.ts

Index.html

Note: we need to add FormsModule in appmodule.ts. Reason is it is a module,

required for "ngModel".


Output

Angular Iteration Properties with Example

     The directive *ng For uses a iterator pattern to repeat any element and read the values from collection in a sequential order.

Angular iterations are provided with a set of properties that can access the iteration counter details which include the following

index--> It is a number Type

It returns the index number of iterator in an iteration.

It  is a zero index based.

first--> It is boolean Type

It returns true if iteration counter is the first iterator

last--> It is boolean Type

It returns true if iteration counter is the last iterator

even--> It is boolean Type

It returns true for even occurances in iteration.

odd--> It is boolean Type

It returns true for odd occurances in iteration

trackBy -->It is a string(function)

It uses a function to track the changes in iteration.

Example

.ts File changes

import { Component } from '@angular/core';

@Component({

  selector: 'app-iteration',

  templateUrl: './iteration.component.html',

  styleUrls: ['./iteration.component.css']

})

export class IterationComponent {

public products=[

  { Id:1, Name: 'Samsung Tv', Price:5600.44},

  { Id:2, Name: 'Sony Tv', Price:5900.44},

  { Id:3, Name: 'Mi Tv', Price:2600.44},

  { Id:4, Name: 'OnePlus Tv', Price:1600.44},

  { Id:5, Name: 'aiwa TV', Price:5600.44},

];

public Update() {

  this.products=[

    { Id:6, Name: 'Onida TV', Price:3600.44},

  ];

}

}

.html File Changes

<h2> Iteration Properties</h2>

<div>

    <button (click) ="Update()" > Update Products</button>

</div>

<table border="1" width="500">

    <th> Product Id</th>

    <th> Name </th>

    <th> Price </th>

    <th> Index</th>

    <th> First </th>

    <th> Last </th>

    <th> Even </th>

    <th> Odd </th>

    <tr *ngFor="let item of products;

    let i=index; let first=first;let last=last;let even=even;

    let odd=odd">

    <td> {{ item.Id}} </td>

    <td>  {{ item.Name}}</td>

    <td>  {{ item.Price}} </td>

    <td> {{ i }} </td>

    <td> {{ first }} </td>

    <td> {{ last }} </td>

    <td> {{ even }} </td>

    <td> {{ odd }} </td>

    </tr>

</table>

ScreenShot

appmodule.ts

index.html

Output:

On Clicking on update products

Working with Iterators(Render List in Data Definition)

Create a new Component

ng g c iterationDataDefinationcls

ScreenShot

Goto iteration-data-definationcls.component.ts file and write the below code

import { Component } from '@angular/core';

@Component({

  selector: 'app-iteration-data-definationcls',

  templateUrl: './iteration-data-definationcls.component.html',

  styleUrls: ['./iteration-data-definationcls.component.css']

})

export class IterationDataDefinationclsComponent {

public topics= [

  {Title: 'Angular JS' ,Description : 'It is a client Side Framework'},

  {Title: 'Angular' ,Description : 'It is a client Side PlatForm'},

]

}

ScreenShot

.html code changes

<h2> Table of Contents</h2>

<dl>

    <div *ngFor="let item of topics">

        <dl> {{ item.Title }} </dl>

        <dl> {{ item.Description }}</dl>

    </div>

</dl>

ScreenShot

appmodule.ts

Index.html

Output

Working with Iterators in Angular (Similar Like DataList)

Create a new Component

>ng g c iteration

Screenshot

Go to iteration.ts and write the following static code

import { Component } from '@angular/core';

@Component({

  selector: 'app-iteration',

  templateUrl: './iteration.component.html',

  styleUrls: ['./iteration.component.css']

})

export class IterationComponent {

public dataList= [ {category: 'Electronics', product : ['SamsungTV', 'Mobiles']},

{category: 'Shoes',product:['Nike Casual', 'Leo']}

];

}

Screenshot

.html code

<h2> Data List</h2>

<ol>

    <li *ngFor ="let item of dataList">

        {{item.category}}

        <ol type="o" >

            <li *ngFor="let product of item.product">

                {{product}}

            </li>

        </ol>

    </li>

</ol>

Screenshot

Make the following changes to appmodule.ts

Make the following changes to index.html

Output