Modal window in angular 8+

 Modal window in angular 8+

HTML

           

<button class="btn btn-info btn-sm mr-2" (click)="termsConds(termsConditions)">
                        Modal Window</button>

     <ng-template #termsConditions let-modal>
                    <div class="modal-header">
                        <h4 class="modal-title">Modal Title</h4>
                        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">

                        <h1>Terms Conditions</h1>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success"
                            (click)="modal.close('Accept click')">Accept</button>
                    </div>
                </ng-template>

TS

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

  termsConds(termsConditions) {
    this.modalService.open(termsConditions, { size: 'xl' });
  }

How to calculate total amount with discount, service charge and other Taxes

 How to calculate total amount with discount, service charge and other Taxes 

<div style="width:120px; margin:auto; text-align:center">

  <form>

    <label>Amount</label>

    <input type="number" [(ngModel)]="amt" name="amt"

      placeholder="Total" (ngModelChange)="updateValues()" />

    <br /><br />

    <label>Discount %</label>

    <input type="number" [(ngModel)]="discount" name="discount"

      placeholder="Discount %" (ngModelChange)="updateValues()" />

    <br /><br />

    <label>Total Amount</label>

    <input type="number" [(ngModel)]="totalamount" name="totalamount"

      placeholder="Total Amount" readonly />

    <br /><br />

    <label>Service</label>

    <input type="number" [(ngModel)]="servCharge" name="servCharge"

      placeholder="5%" readonly />

    <br /><br />

    <label>Tax</label>

    <input type="number" [(ngModel)]="TSCharge" name="TSCharge"

      placeholder="5%" readonly />

    <br />

    <h3>Total : {{ getTotal() }}</h3>

  </form>

</div>

TS

-----

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

@Component({

  selector: 'my-app',

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

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

  amt: number;

  servCharge: number;

  TSCharge: number;

  discount: number;

  totalamount: number;

  updateValues() {

    this.totalamount = this.amt - this.amt * (this.discount / 100);

    this.servCharge = this.totalamount * 0.05; // Assuming service charge is 5%

    this.TSCharge = this.totalamount * 0.05; // Assuming tax is 5%

  }

    getTotal() {

    // Check if any of the values are not valid numbers

    if ( isNaN(this.totalamount) || isNaN(this.servCharge) || isNaN(this.TSCharge) ) {

      return 0; // Return 0 if any of the values are not valid numbers

    } else {

      return this.totalamount + this.servCharge + this.TSCharge; // Perform the addition if all values are valid numbers

    }

  }

}

OUT PUT

-------------

Data Binding - Class Binding

 c) Class Binding (.ts --> .html)

<style>
     .    textSize {
font-size:60px;
}
                .textColor{
                        color:#f60;
                }
</style>

public myClass='textSize'

public myGroup = {
textSize :true,
textColor :true
}

public isRequired: boolean = true

<P [class]="myClass">Class Binding</P>

<P [class]="myGroup">Group Classes Binding</P>

<P [ngClass]="myGroup">Group Classes Binding with ngClass</P>

<P [ngClass]="isRequired ? 'textColor':'textSize'">Group Classes Binding with Ternary operator</P>

<P [class.textSize]="isRequired">Class Binding with . operator</P>

Data Binding - Property Binding

 b) Property Binding (.ts --> .html)

To set the property of an element in view to a property defined in the component's class

1. Property Vs Attribute:
2. Attributes and properties are not the same
3. Attributes are defined by HTML
4. Properties are defined by DOM
5. Attribute values can not be change once they are initialized.
6. Property values can change

public name="Sai Krishna"

public isDisabled : boolean = false

<input type="text" value={{name}} id={{name}}>
<input type="text" [value]="name" [id]="name">

<input type="text" [value]="name" [id]="name" disabled>
<input type="text" [value]="name" [id]="name" disabled={{isDisabled}}>
<input type="text" [value]="name" [id]="name" [disabled]="isDisabled">

Data Binding - Interpolation in databinding

 Data Binding:

Data binding allows us to communicate between component class and its corresponding view template.

Data Binding - 2Type of Data binding

1.One-way Data Binding

a) String interpolation(.ts --> to .html)

b) Property Binding (.ts --> .html)

c) Class Binding (.ts --> .html)

d) Style Binding(.ts --> .html)

e) Event Binding(.html --> .ts)

2.Two-way Data Binding

a) .html --> .ts

b) .ts --> .html

 

1.One-way Data Binding Ex:- 

.ts 

public name :string = "Sai Ram Krishna"

imgUrl = '../../assets/img/img.jpg'

Employee={
    name : 'Sai',
    age:22
}

EmpFamly=[
         {name:'RamRaj', age:44},
         {name:'NagRaj', age:45},
        {name:'BalRaj', age:46},
]

MyFamly=[
    {fname:'RamRaj', lname:'k', age:44},
    {name:'BalaRaj', lname:'', age:45},
    {name:'LakshmanRaj', lname:'k', age:46},
]

public getMyName(){
return `${this.name}`
}

.html

<h3>My Name is : {{name}}</h3>

<h3>My Name lenght : {{name.length}}</h3>

<h3>My Name UpperCase : {{name.UpperCase}}</h3>

<h3>My Name LowerCase : {{name.toLowerCase}}</h3>

<h3>My Name with method : {{getMyName()}}</h3>

<h2>My Name is : {{Employee.name}}</h2>

<h2>My Name age : {{Employee.age}}</h2>

<h1>{{EmpFamly | json}}</h1>

<h1>{{EmpFamly[1].name}}</h1>

<h2>{{MyFamly.lname ? MyFamly.lname : 'Last name is not available'}}</h2>

<img src={{imgUrl}} />

Create Angular project with material design

Create Angular project with material design

 > ng new angular --strict-false

If we add above command in terminal strict mode removed in angular project.

First will install bootstrap libraries

> npm install bootstrap --save

after install bootstrap please install below command also, due to if not install below command not working dropdown with button and dropdown list in our application.

> npm install @popperjs/core

package.json
--------------

"styles": [

"src/styles.css".

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

],

"scripts":[

"node_modules/@popperjs/core/dist/umd/popper.min.js",

"node_modules/bootstrap/dist/js/bootstrap.min.js"

]

after install bootrtrap will install angular meterial install.

> ng add @angular/material

After installation @angular/material below added new line in styles array

package.json

--------------

"styles": [

"@angular/material/prebuilt-themes/indigo-pink.css",

"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"

],

"scripts":[

"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"

]

index.html
------------

Default display in body tag like below added

<body class="mat-typography">

<app-root></app-root>

</body>

Note:- Please remove class="mat-typography" (if you use this class every time override bootstrap classes.)

<body>

<app-root></app-root>

</body>

then enter below command in terminals

> ng serve -open

(or)

> ng serve -o

once run the application index.html will go to angular.json then control will go to main.ts file

After install angular material will got some time below error

c:\Users\<systemname>\AppData\Roaming\npm\ng.ps1 can not be loaded because running scripts is disabled on this system

once remove this file "ng.ps1" will not get any error

Create Angular project

Create angular project

First will install node.js in local system then install angular cli to global in local system

https://nodejs.org/en/download

https://angular.io/cli

https://code.visualstudio.com/

after install Visual Studio Code, node js and @angular/cli 

we can create angular application through visual studio code

ng new my-project

cd my-project

ng serve (or) ng serve --open (or) ng serve -o

if given ng serve command will run angular application but not open in browser

ng serve --open (or) ng serve -o

when your given command will open angular application in browser 

localhost://4200 default angular application local url