Edureka : Angular
Sat May 01 2021 18:31:57 GMT+0000 (Coordinated Universal Time)
Saved by @jpannu #angular #typescript
/*
> Commands for npmp pack or Terminal.
*/
// Install Cmd ( Globally ).
npm install-g typescript
//Adding Bootstrap.
npm install bootstrap --save
-----------------------------------------------------------
//Typescript
//Data types
string
number
boolean
string
string[] //Array of Strings
number[] //Array of Numbers
any[] //Array of any Data type
undefined //undefined
void //undefined or if the value won't be returned ( void ( khaali ) )
enum
any
let canBeOneOfTheseTwoType : string | boolean; // The value can be "string" or "boolean".
let data : number | boolean | string = '980033' ; // Valyue can be 1/3 data types.
let data2 : any = "Jaskaran"; //Any type of data type can used.
let mixArray:[string, number, string, boolean] = ["Jaskaran", 1996, "Singh", true]; //Structure has to be same.
enum Color {Red, Green, Blue};
let data: Color = Color.Red; //Will return 0
let data2: Color = Color.Blue; // Will return 2
//Default Parameter.
function check(a:string, b:string = '99'):string{
return "Default Parameter"
}
//Optional Parameter.
function check(a:string, b? :string ):string{
return " b is optional here "
}
//Having multiple data types and optional argument.
function check(n1: number | boolean , n2? :number | string) {
return "Optional Paramter and multiple Data types"
}
//Interface
interface IAPIResponse {
name : string,
age : number
}
function playerOne(): IAPIResponse {
return {
name : 'Jaskaran',
age : 20
}
}
function playerTwo(): IAPIResponse {
return {
name : "Karan",
age : 26
}
}
console.log(playerOne());
console.log( playerTwo());
/* --------------- Class 1 ------------------ */
//CMD commands for TSC.
-h, -help
-w, -watch
--pretty
--all
-v, --version
--init // Initialize
-p, --project
-b, --build
-t, --target
-m, --module
//To Change from TS to JS.
tsc index.ts //It will output the new file in the same directory with "index.js"
/* -------------------- Class 2 ------------------------- */
// Module and Component
module1
->component1-1
->component1-2
->component1-3
->component1-4
module2
->component2-1
->component2-2
->component2-3
->component2-4
module3
->component3-1
->component3-2
->component3-3
->component3-4
// Components are small parts of module. And App is divided into multiple modules( Parent )
Component:
M : Data ( will control V & C )
V : template ( .html )
C : logic ( .ts )
//Meta Data
@NgModule { //@NgModular is called decorator
//I s Module
}
export class{}
@Component { //@Component is called decorator
//Is a Component
}
export class{}
@Injectable { //@Injectable is called decorator
//Is a Service
}
export class{}
//On Start
1. main.ts --> App Module
2. App Module -->
// Inserting as component //Default set up.
<div app-products></div>
@Component({
selector: '[app-products]'
}
//Inserting as a Class
<div class="app-products"></div>
@Component({
selector: '.app-products'
}
/* -------------------- Class 3 ------------------------- */ "{}" is a Class.
//Event Binding:
// .html
<button (click) ="willDoSomething();"></button> //DOM to component.
//.ts
--------------------------------------
/*
1. Property Binding:
//#CASE ( Passing the values/data from parent Component "App" to child component"Header" )
( PARENT ),
*/
>app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
FormsModule
]
{
list = [
{ Name: "nike", Product: "Shoes" },
{ Name: "Apple", Product: "Phones" },
{ Name: "BB", Product: "Software" },
{ Name: "Samsung", Product: "Chips" },
]
}
----------------------------
>app.html
<app-header [productsOne]="list"></app-header>
-------------------------
>header.html
<tr *ngFor='let item of productsOne'>
<td> {{item.Name}} </td>
<td> {{ item.Product }} </td>
</tr>
-------------------------
>header.ts
import { Input } from '@angular/core';
{
@Input()
productsOne: any;
}
--------------------------
//#CASE ( Passing the values/data from Child Component "Header" to Parent component"App" )
/*
Event Binding:
*/
>header.html
<button class="btn" (click)="childButtonClicked();">ChildButton</button>
--------------------------------
>header.ts
import { Output, EventEmitter } from '@angular/core';
{
constructor() {
this.dataOne = new EventEmitter();
}
@Output()
dataOne: EventEmitter<any>;
childButtonClicked(){
this.dataOne.emit({
name : "Karan",
age : "25"
});
}
--------------------------------
>app.html
<app-header (dataOne)="dataComingFromChild($event);" ></app-header>
---------------------------------
>app.ts
dataComingFromChild(data:any){
console.log(data);
}
-----------------------------------
To flow data one direction.
[ngModel] ='val' ;
To flow data both the direction.
[(ngModel)] ='val' ; ( value will be binded )
/* Directives
1. Components as directives (simple/single component)
2. Structural Directives
ngIf
[hidden]
ngFor
ngSwitch
3. Attribute Directives
[ngStyle]
[ngClass]
4. Custom Directives
*/
// Structural Directives:
/*
ngIf
[hidden]
ngFor
ngSwitch
*/
"*ngFor" is known as structure directive, As it changes the structure of the web page.
//ngIF - Structural directive
<div *ngIf='condition'>
Content will Render if condition is true
</div>
//ngClass
/*
Add or Remove CSS classes ( using Logic )
*/
/* -------------------- Class 4 ------------------ */
//*ngIf
>> #Case
header.html
<div>
<div *ngIf="defaultBool">
Data is in the First Slot
</div>
<div *ngIf="!defaultBool">
Data is in the Second Slot
</div>
<button class="btn btn-block" (click)='toggleData()'>
Click to Toggle
</button>
</div>
header.ts
defaultBool:boolean = true;
toggleData(){
this.defaultBool = !this.defaultBool;
}
----------------------------------------------------
//Else-if
#case
>header.html
<div *ngIf="defaultBool else toggleIDName">
Data is in the First Slot
</div>
<ng-template #toggleIDName>
<div>
Data is in the Second Slot
</div>
</ng-template>
<button class="btn btn-block" (click)='toggleData()'>
Click to Toggle
</button>
> header.ts
defaultBool:boolean = true;
toggleData(){
this.defaultBool = !this.defaultBool;
}
----------------------------------------------------
//[hidden] property: ( mostly used for Small parts )
.html
<div [hidden]='defaultHiddenValue'>
Hidden Example </div>
<button (click)="toggleHidden"> Click to hide </button>
.ts
defaultHiddenValue:boolean = true;
toggleHidden(){
this.defaultHiddenValue = !this.defaultHiddenValue;
}
** The Hidden property will hide the stuff from the web page( Will be visible in Source Code ), Where as 'NgiF' will completely remove/add the Elements/element from DOM,
----------------------------------------------------
// Ngswitch
#syntax:
<div [ngSwitch]='companiesList'>
<p *ngSwitchCae="aws">AWS stuff </p>
<p *ngSwitchCae="google">google stuff </p>
<p *ngSwitchCae="MS">MS stuff </p>
<p *ngSwitchCae="Applce">Applce stuff </p>
<p *ngSwitchDefault="Defaul Value"> kites </p>
</div>
.html
<div [ngSwitch]='selectCourse'>
<div *ngSwitchCase="'react'">react</div>
<div *ngSwitchCase="'angular'">angular</div>
<div *ngSwitchCase="'vue'">vue</div>
<div *ngSwitchDefault> Default value..... </div>
</div>
<button (click)="reactCourse()">React Developer </button>
<button (click)="angularCourse()">Angular Dev </button>
<button (click)="vueCourse()">Vue Developer </button>
.ts
{
selectCourse:string = '';
reactCourse(){ this.selectCourse = "React"; }
angularCourse(){ this.selectCourse = "Angular"; }
vueCourse(){ this.selectCourse = "Vue"; }
}
----------------------------------------------------
//Attribute Directives
/*
[ngStyle]
[ngClass]
*/
// ngStyle:
.html
<h1 [ngStyle]= "{ 'color' : selectedColorName }">
"Some Text here";
</h1>
<button (click)="redColor()"> click to red it </button>
.ts
selectedColorName:string = 'gray'; //By default the color will be gray.
redColor(){
this.selectedColorName = 'red';
}
//We can change the color value dynamically as per our need.
----------------------------------------------------
// ngClass : attribute Directive.
.html
<h2 [ngClass] = "{ 'className1' : variableName == 'average', 'className2' : variableName == 'good' }" >
{{ selectCourse }} : {{variableName}} // Will manipulate the classes depending upon 'variableName' value.
</h2>
.ts
variableName:string = "average"; //Default value.
//We can change the variableName value dynamically as per our need, To 'average' or 'good' or anything and then set that value in HTML attribute value.
----------------------------------------------------
/*
//Custom directives
:When inbuilt directives are not sufficient, We create our own directives as per our need.
#syntax:
@Directive() //decorator
class myDirectiveName {
//class
}
*/
> ng g directive myCustomDirectiveName //CLI
customDirective.ts
import { ElementRef, HostListener } from '@angular/core';
constructor( private eleRef: ElementRef ) {
}
@HostListener('mouseenter') onEnter() {
this.eleRef.nativeElement.style.background = 'gray';
this.eleRef.nativeElement.style.cursor = 'pointer';
}
@HostListener('mouseleave') onLeave(){
this.eleRef.nativeElement.style.background = 'initial';
}
header.html
<div>
<ol>
<li appMyCustomDirective>Nike</li>
<li appMyCustomDirective>UA</li>
<li appMyCustomDirective>Roots</li>
</ol>
</div>
/*
PIPES
: PIPEs are used to improve/increase the functionaility of the app/page.
Types:
1.Inbuilt Pipes
2.Custom Pipes.
*/
1.Inbuilt Pipes
#example
> header.ts
dob = new Date();
price = 10;
name = 'jaskaran'
> header.html
<ol>
<li> {{ name | uppercase }} </li>
<li> {{ name | lowercase }} </li>
<li> {{ name | titlecase }} </li>
</ol>
<div>
Short date formate: {{ dob | date: 'short' }} <br>
Full date formate: {{ dob | date: 'full' }} <br>
Custom Format1: {{ dob | date: 'MM/dd/YYYY' }} <br>
Custom Format2: {{ dob | date: 'dd-MM-YYYY' }} <br>
</div>
<div>
currencyDollar (default) : {{ price | currency }} <br>
currency Pound : {{ price | currency:'GBP' }} <br>
currency Rupee : {{ price | currency :'INR' }} <br>
</div>
> 2.Custom Pipes.
- cli
ng g pipe customPipeName
#syntax: ( CLI will automatically generate the structure for us. )
@Pipe()
export class customPipeName{
}
#Example 1.
.custom.pipe.ts
export class CustomPipePipe implements PipeTransform {
transform(value: string ): string {
return value + "-Extra String..........";
//value is the "actual" item to work on.
}
}
header.html
{{ 'Jaskaran' | customPipe }}
//Output will 'Jaskaran-Extra String..........'
#Example 2.
> footer.ts
list = [
{ Name: "nike", grade: "A" },
{ Name: "Apple", grade: "B" },
{ Name: "Samsung", grade: "A" },
]
> gradingPipe.ts
transform(value:any, ...args: any[]): any {
//Value will be the complete data ( "list" ).
//args will be values provided'Arguments' ( right side of pipe name in HTML ),
const grade = args[0];
const filteredStudents = value.filter(( item:any )=>{
return (item.grade == grade);
})
return filteredStudents;
}
> footer.html
<tbody>
<tr *ngFor="let item of list | filterGrades:'A' ">
<td> {{ item.Name | uppercase }} </td>
<td> {{ item.grade}} </td>
</tr>
</tbody>
//Services
:Is used to share the data and the logic between different components.
/* -------------------- Class 5 ---------------- */
/* -------------------- Class 6 ------------------ */
Comments