Angular with Typescript: 2023

Wednesday, November 22, 2023

Data Binding - Class Binding

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

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>

Friday, November 10, 2023

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

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

public name="Sai Krishna"

public isDisabled : boolean = false

Wednesday, November 8, 2023

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 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>

Tuesday, October 17, 2023

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

<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

Sunday, January 8, 2023

Tab Menu Nav in angular 13

We have three tab menu in main-tabmenu.component page
Tab-1 / Tab-2 / Tab-3

Tab-1 default will display, onclick "Move to tab-2" button in the tab-1 then will move to tab-2.

Previous and next button in tab2.component.html page.

main-tabmenu.component.html
---------------------------------------

<app-tab1 (Tab2DivShow)="EnableTab2($event)" ></app-tab1>

</div>

<app-tab2 (Tab3DivShow)="EnableTab3($event)" (Tab1DivShow)="EnableTab1($event)"></app-tab2>

</div>

<app-tab3></app-tab3>

</div>

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

main-tabmenu.component.ts
----------------------------

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

@Component({
selector: 'app-components',

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

styleUrls: ['./components.component.css']
})

export class ComponentsComponent {

tab1=true;
tab2=false;
tab3=false;

tab1Div = true;
tab2Div = false;
tab3Div = false;

EnableTab1(EnableTab1:any){
this.disableTabs();
this.tab1Div = true;
}

EnableTab2(EnableTab2:any){
this.disableTabs();

this.tab2Div = true;
}

EnableTab3(EnableTab3:any){
this.disableTabs();
this.tab3Div = true;
}

disableTabs(){
this.tab1Div = false;
this.tab2Div = false;
this.tab3Div = false;
}
}

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

tab1.component.html
----------------------------

tab1.component.ts
----------------------------

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Output() public Tab2DivShow = new EventEmitter();

tab2DivDisplay(){
this.Tab2DivShow.emit("This is from Child Message");
}

tab2.component.html
----------------------------

<button (click)="tab1DivDisplay()">Previous-Tab1</button>

<button (click)="tab3DivDisplay()">tttTab-3</button>

tab2.component.ts
----------------------------

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Output() public Tab1DivShow = new EventEmitter();

@Output() public Tab3DivShow = new EventEmitter();

tab3DivDisplay(){
this.Tab3DivShow.emit("This is from Child Message");
}

tab1DivDisplay(){
this.Tab1DivShow.emit("This is from Child Message");
}

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

Folder Structure
---------------------

app / comp

@Input - @Output

@Input : - Parent to child communication.

@Output :- Child to parent

Parant Component

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

parent-component.html

<app-parent-component (childInfo)="msg=$event" [fromParent]="parentMsg"></app-parent-component>

parent-component.ts

public parentMsg = "This is parent Message";

msg: any;

Child Component

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

child-component.html

</h1>

child-component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Input('fromParent') public parent: any;

@Output() public childInfo = new EventEmitter();

fireEvent(){

this.childInfo.emit("This is from Child");

}