DOTNET

Tuesday, September 26, 2023

Working with Angular Condition with Multiple Directives

Note: Angular will not allow multiple directive in single elements.

You have to use the logical container like 

<ng-component>

<ng-container>

<ng-template>

Example

Add a new component

ng g c conditioncomponentui

.ts file changes

Screen Shot

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

@Component({
  selector: 'app-conditioncomponentui',
  templateUrl: './conditioncomponentui.component.html',
  styleUrls: ['./conditioncomponentui.component.css']
})
export class ConditioncomponentuiComponent {
public products= [
  {Id:1,Name:'TV',Category:'Electronics'},
  {Id:2,Name:'Mobile',Category:'Electronics'},
  {Id:3,Name:'NikeShoe',Category:'Shoes'},
  {Id:4,Name:'BataShoe',Category:'Shoes'},
  {Id:5,Name:'Dinning Table',Category:'Furniture'},
  {Id:6,Name:'Sofa',Category:'Furniture'},
];
}

.html changes
<table width="400" border="1">
    <th>Product Id</th>
    <th> Product Name</th>
    <th> Category </th>
<tr *ngFor= "let item of products;">
    <ng-container *ngIf="item.Category=='Shoes'">
        <td> {{ item.Id}} </td>
        <td> {{ item.Name }} </td>
        <td> {{ item.Category }} </td>
    </ng-container>
</tr>
</table>

ScreenShot













AppModule.ts


Index.html



Output

Working with Angular Condition With UI Example

Working with Angular Condition with UI Example

Angular can handle conditions in UI using typescript that is using selection statements such as if else, switch and case.

Conditions can be handle by using angular directive such as "ngIf"

ngIf uses a boolean value to add or remove any DOM element dynamically.

Syntax

Example

Add a new component

ng g c angularconditionsui

.ts file changes

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

@Component({
  selector: 'app-angularconditionsui',
  templateUrl: './angularconditionsui.component.html',
  styleUrls: ['./angularconditionsui.component.css']
})
export class AngularconditionsuiComponent {
public products={
  Name: 'Samsung TV',
  Price:4500.64,
  Mfd:new Date('2023/09/09'),
  Photo: 'assets/Samsung.jpg'
};
public isVisible=false;
public ShowHidePreview()
{
  this.isVisible=this.isVisible? false:true;
}
}

ScreenShot

.html Changes

<dl>
    <dt>Name</dt>
    <dd> {{products.Name}}</dd>
    <dl> Price</dl>
    <dd> {{products.Price }}</dd>
    <dl> Manufacture</dl>
    <dd> {{products.Mfd.toLocaleDateString() }}</dd>
    <dl> <button (click) ="ShowHidePreview()"> {{isVisible ? 'Hide': 'Show' }}</button></dl>
    <dd *ngIf="isVisible">
        <img [src]="products.Photo" width="250" height="250"> </dd>
</dl>

ScreenShot

AppModule.ts

Index.html

Output

Note: Angular will not allow multiple directive in single elements.

You have to use the logical container like 

<ng-component>

<ng-container>

<ng-template>

Class Binding in Angular

Example Iteration for even and Odd Properties

Apply a CSS Class to a table row over iteration.

Syntax:

[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