General

//Css
$('elem').css('prop','val')

//classes
$('elem').addClass();
$('elem').removeClass();
$('elem').toggleClass();


$('.galleryBox').css('width');
//It will display 'width in pixels' properties of selector.

$('.galleryBox').width();
//It will display the width only in numbers ( no units )
//It will display the height only in numbers ( no units )
$('.galleryBox').height();

//chechbox toggle/update/check
let checkBox = $('input:checkbox').is(":checked");
console.log(checkBox)
//It will True if it's checked, False if unchecked.
/* 
> 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  ------------------ */



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



     

Similiar Collections

Python strftime reference pandas.Period.strftime python - Formatting Quarter time in pandas columns - Stack Overflow python - Pandas: Change day - Stack Overflow python - Check if multiple columns exist in a df - Stack Overflow Pandas DataFrame apply() - sending arguments examples python - How to filter a dataframe of dates by a particular month/day? - Stack Overflow python - replace a value in the entire pandas data frame - Stack Overflow python - Replacing blank values (white space) with NaN in pandas - Stack Overflow python - get list from pandas dataframe column - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to drop rows of Pandas DataFrame whose value in a certain column is NaN - Stack Overflow python - How to lowercase a pandas dataframe string column if it has missing values? - Stack Overflow How to Convert Integers to Strings in Pandas DataFrame - Data to Fish How to Convert Integers to Strings in Pandas DataFrame - Data to Fish create a dictionary of two pandas Dataframe columns? - Stack Overflow python - ValueError: No axis named node2 for object type <class 'pandas.core.frame.DataFrame'> - Stack Overflow Python Pandas iterate over rows and access column names - Stack Overflow python - Creating dataframe from a dictionary where entries have different lengths - Stack Overflow python - Deleting DataFrame row in Pandas based on column value - Stack Overflow python - How to check if a column exists in Pandas - Stack Overflow python - Import pandas dataframe column as string not int - Stack Overflow python - What is the most efficient way to create a dictionary of two pandas Dataframe columns? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow python - How do I get the row count of a Pandas DataFrame? - Stack Overflow python - How to save a new sheet in an existing excel file, using Pandas? - Stack Overflow Python Loop through Excel sheets, place into one df - Stack Overflow How do I select a subset of a DataFrame? — pandas 1.2.4 documentation python - Delete column from pandas DataFrame - Stack Overflow python - Convert list of dictionaries to a pandas DataFrame - Stack Overflow How to Add or Insert Row to Pandas DataFrame? - Python Examples python - Check if a value exists in pandas dataframe index - Stack Overflow python - Set value for particular cell in pandas DataFrame using index - Stack Overflow python - Pandas Dataframe How to cut off float decimal points without rounding? - Stack Overflow python - Pandas: Change day - Stack Overflow python - Clean way to convert quarterly periods to datetime in pandas - Stack Overflow Pandas - Number of Months Between Two Dates - Stack Overflow python - MonthEnd object result in <11 * MonthEnds> instead of number - Stack Overflow python - Extracting the first day of month of a datetime type column in pandas - Stack Overflow
כמה עוד נשאר למשלוח חינם גם לעגלה ולצקאאוט הוספת צ'קבוקס לאישור דיוור בצ'קאאוט הסתרת אפשרויות משלוח אחרות כאשר משלוח חינם זמין דילוג על מילוי כתובת במקרה שנבחרה אפשרות איסוף עצמי הוספת צ'קבוקס לאישור דיוור בצ'קאאוט שינוי האפשרויות בתפריט ה-סידור לפי בווקומרס שינוי הטקסט "אזל מהמלאי" הערה אישית לסוף עמוד העגלה הגבלת רכישה לכל המוצרים למקסימום 1 מכל מוצר קבלת שם המוצר לפי ה-ID בעזרת שורטקוד הוספת כפתור וואטסאפ לקנייה בלופ ארכיון מוצרים הפיכה של מיקוד בצ'קאאוט ללא חובה מעבר ישיר לצ'קאאוט בלחיתה על הוספה לסל (דילוג עגלה) התראה לקבלת משלוח חינם בדף עגלת הקניות גרסה 1 התראה לקבלת משלוח חינם בדף עגלת הקניות גרסה 2 קביעה של מחיר הזמנה מינימלי (מוצג בעגלה ובצ'קאאוט) העברת קוד הקופון ל-ORDER REVIEW העברת קוד הקופון ל-ORDER REVIEW Kadence WooCommerce Email Designer קביעת פונט אסיסנט לכל המייל בתוסף מוצרים שאזלו מהמלאי - יופיעו מסומנים באתר, אבל בתחתית הארכיון הוספת כפתור "קנה עכשיו" למוצרים הסתרת אפשרויות משלוח אחרות כאשר משלוח חינם זמין שיטה 2 שינוי סימן מטבע ש"ח ל-ILS להפוך סטטוס הזמנה מ"השהייה" ל"הושלם" באופן אוטומטי תצוגת הנחה באחוזים שינוי טקסט "בחר אפשרויות" במוצרים עם וריאציות חיפוש מוצר לפי מק"ט שינוי תמונת מוצר לפי וריאציה אחרי בחירה של וריאציה אחת במקרה של וריאציות מרובות הנחה קבועה לפי תפקיד בתעריף קבוע הנחה קבועה לפי תפקיד באחוזים הסרה של שדות משלוח לקבצים וירטואליים הסתרת טאבים מעמוד מוצר הצגת תגית "אזל מהמלאי" בלופ המוצרים להפוך שדות ל-לא חובה בצ'קאאוט שינוי טקסט "אזל מהמלאי" לוריאציות שינוי צבע ההודעות המובנות של ווקומרס הצגת ה-ID של קטגוריות המוצרים בעמוד הקטגוריות אזל מהמלאי- שינוי ההודעה, תגית בלופ, הודעה בדף המוצר והוספת אזל מהמלאי על וריאציה הוספת שדה מחיר ספק לדף העריכה שינוי טקסט אזל מהמלאי תמונות מוצר במאונך לצד תמונת המוצר הראשית באלמנטור
הודעת שגיאה מותאמת אישית בטפסים להפוך כל סקשן/עמודה לקליקבילית (לחיצה) - שיטה 1 להפוך כל סקשן/עמודה לקליקבילית (לחיצה) - שיטה 2 שינוי הגבלת הזיכרון בשרת הוספת לינק להורדת מסמך מהאתר במייל הנשלח ללקוח להפוך כל סקשן/עמודה לקליקבילית (לחיצה) - שיטה 3 יצירת כפתור שיתוף למובייל פתיחת דף תודה בטאב חדש בזמן שליחת טופס אלמנטור - טופס בודד בדף פתיחת דף תודה בטאב חדש בזמן שליחת טופס אלמנטור - טפסים מרובים בדף ביי ביי לאריק ג'ונס (חסימת ספאם בטפסים) זיהוי אלו אלמנטים גורמים לגלילה אופקית לייבלים מרחפים בטפסי אלמנטור יצירת אנימציה של "חדשות רצות" בג'ט (marquee) שינוי פונט באופן דינאמי בג'ט פונקציה ששולפת שדות מטא מתוך JET ומאפשרת לשים הכל בתוך שדה SELECT בטופס אלמנטור הוספת קו בין רכיבי התפריט בדסקטופ ולדציה למספרי טלפון בטפסי אלמנטור חיבור שני שדות בטופס לשדה אחד שאיבת נתון מתוך כתובת ה-URL לתוך שדה בטופס וקידוד לעברית מדיה קוורי למובייל לייבלים מרחפים בטפסי אלמנטור תמונות מוצר במאונך לצד תמונת המוצר הראשית באלמנטור הצגת תאריך עברי פורמט תאריך מותאם אישית