Working with BootStrap for Angular Application

 Install bootstrap for your project

npm install bootstrap@3

Goto angular.json, file and add the below code

 npm install bootstrap@3

angular.json

            "styles": [

              {

                "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"

              },

              "src/styles.css"

            ],

.html changes

<div class="container">

    <form #fromlogin>

        <h2>Login Page </h2>

            <div class="form-group" ng-class="{ 'has-error' : true }">

            <label class="control-Label" for="Name" >Username</label>

            <div>

                <input class="form-control" name="Name" type="text" required >

                <span *ngIf="true" class="text-danger" >Name Required</span>

            </div>

        </div>

        <div class="form-group">

            <label class="control-Label" for="Pwd">Password</label>

            <div>

                <input class="form-control" name="Pwd" type="password" required>

                <span *ngIf="true" class="text-danger">Password Required</span>

            </div>

        </div>

        <div class="form-group">

            <button class="btn btn -block btn-primary">Login</button>

        </div>

    </form>

</div>

ScreenShot

angularmodule.ts

index.html

Output

Working with Angular Style Binding

 Style binding is a technique used by angular to define inline styles for any element dynamically.

The styles are defined in a function that can return a set of effects by using objects.

Syntax

public Effects() {

let styles= {

'color' :'red';

'font-weight' :'bold';

}

return style

}

The style are bound to any element by using "ngstyle" directive

Syntax:

<h2 [ngstyle]="Effects()" > Your Text </h2>

Example

Add a new   component

ng g c stylebinding

.ts changes

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

@Component({

  selector: 'app-stylebinding',

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

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

})

export class StylebindingComponent {

public backColor:any;

public textColor:any;

public Effects() {

  let styles= {

  'background-color' : this.backColor,

  'color': this.textColor,

  'text-align':'center'

  };

  return styles;

}

}

ScreenShot

html changes

<fieldset>

    <legend> Select Effects</legend>

    <dl>

    <dt> Background Color</dt>

    <dd>

        <select [(ngModel)]="backColor" >

            <option> Green </option>

            <option> Blue </option>

            <option> Red </option>

        </select>

    </dd>

    <dt>Text Color</dt>

    <dd>

        <select [(ngModel)]="textColor">

            <option> White </option>

            <option> Yellow</option>

            <option> Gray </option>

        </select>

    </dd>

    </dl>

</fieldset>

<h2 [ngStyle]="Effects()"> Style Binding</h2>

Screenshot

AppModule.ts

Index.html

Output

Working with Angular Class Binding Example

 Angular class binding is a technique used by angular to apply a css class for any element dynamically.

The dynamic classes are bound to elements by using ng class directive.

The ng class directive is used as a dynamic property for element that can refer to className.

The css classes are refered in three ways

1 String Type : It is used when you have to define any specific css class.

<div  [ngclass]="className" >

2 Refer as an Array

It is used when you have to define multiple css classes to element.

Example

<div [ngclass]="[class1','class2'......]">

3 Refer as an object

It is used when you want to turn on or off classes dynamically.

Dynamically Adding css classes to any Element.

Add a new component

.ts file changes

@Component({

  selector: 'app-classbinding',

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

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

})

export class ClassbindingComponent {

public effects: any

public isBackStyle:any;

public isTextStyle:any;

public isBorderStyle:any;

}

ScreenShot

Html Changes

<fieldset>

    <legend> Type Effects</legend>

    <input [(ngModel)]="effects"

    placeholder="eg:backEffects,textEffects,borderEffects" type="text"

    size="45">

</fieldset>

<br/>

<h2 [ngClass]="effects"> Angular </h2>

<fieldset>

    <legend> Choose Effects</legend>

    <ul>

        <li> <input [(ngModel)]="isBackStyle" type="checkbox">Back Effects</li>

        <li> <input [(ngModel)]="isBorderStyle" type="checkbox">Border Effects</li>

        <li> <input [(ngModel)]="isTextStyle" type="checkbox">Text Effects</li>

    </ul>

</fieldset>

<h2 [ngClass]="{backEffects:isBackStyle,textEffects:isTextStyle,borderEffects:isBorderStyle } ">

    SampleText

</h2>

appModule.ts

index.html

Output

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

<div *ngIf =true/false > </div>

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>