Edureka : Angular

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