Snippets Collections
const { scrollTop, offsetHeight } = document.documentElement;
const { innerHeight } = window;
const bottomOfWindow = Math.round(scrollTop) + innerHeight === offsetHeight;

if (bottomOfWindow) {
  console.log('Bottom of window');
}
  ngAfterViewInit(): void {
    const vendor = this.activatedRoute.snapshot.params.vendor_id;

    combineLatest([
      this.filterChanged$.asObservable().pipe(
        startWith({}),
        tap(() => this.pagination.reset())
      ),
      this.sort.sortChange.pipe(
        startWith({}),
        tap(() => this.pagination.reset())
      ),
      this.pagination.pageChanged.pipe(startWith({})),
    ])
      .pipe(
        tap(() => (this.isLoading = true)),
        map(([filterData]) => {
          let orderFilter: OrderFilterInput = {
            vendor,
          };

          if ('dateFrom' in filterData && 'dateTo' in filterData && 'city' in filterData) {
            const { dateFrom, dateTo, city } = filterData;

            orderFilter = {
              ...orderFilter,
              ...(
                dateFrom && dateTo && {
                  createdRange: {
                    gte: dateFrom,
                    lte: dateTo,
                  }
                }
              ),
              city
            };
          }

          return orderFilter;
        }),
        switchMap((orderFilter) =>
          merge(
            this.updateOrders$
              .asObservable()
              .pipe(map(() => ({ callCount: 1, orderFilter }))),
            timer(0, 30 * 1000).pipe(
              map((callCount) => ({ callCount, orderFilter }))
            )
          )
        ),
        switchMap(({ callCount, orderFilter }) => {
          this.newOrderCheckerService.makeFetch();

          const fetchOrders$ = this.orderService.findAll(
            this.getSortData(),
            callCount === 0
              ? this.pagination.getPaginationData()
              : this.pagination.getCachedPaginationData(),
            orderFilter
          );

          return PaginationComponent.paginationSetter$(this.pagination)(
            () => fetchOrders$
          );
        }),
        tap(({ orders }) => {
          this.orders = orders;
          this.data = this.getGroupedOrders(orders);
          this.isLoading = false;
        }),
        filter(() => this.isAdmin()),
        tap(({ orders }) => {
          if (
            !orders.some((order) => order.cancellationReason?.blinkForAdmin)
          ) {
            return;
          }

          this.audioService.play(AvailableAudio.NOTIFICATION);
        }),
        untilDestroyed(this)
      )
      .subscribe();
  }
   /*
    --------------------------
   */
    ** Pending **
  -Methods:
call(), apply(), bind()



  **

  Book :> The Principle of Object oriented Javscript

    **
   : Dereferencing Objects //Is used to Clear the memory on browser           engine.
var object1 = new Object();
// do something
object1 = null;
    // dereference  
   **
    
    **
    : Deleting a value from Object.
    > delete objName.key;
    **
      
    **
    : Function Example -
  function reflect(value) {
    return value;
  }
// is the same as
var reflect = new Function("value", "return value;"); 
     **
        
      **
  arrName['push']('3'); //This is also valid ( using bracket              notation )
       **

      ** // It will store the values as an Object ( String ).
  let nameVariable = new String();
nameVariable.fname = 'Karan';
nameVariable.lname = 'Singh';
       **
           
       ** hasOwnProperty **
    let obj = { fname: "Karan", lname: "Singh" }

    > console.log('fname' in obj)  //true
    > console.log('lname' in obj) //true

    > console.log('toString' in obj)  //true 
    // ( Inbuilt methods will also return true )

    > console.log(obj.hasOwnProperty('toString')) //False
    **
           
       **
           //Ways to access Properties in Object
         > Object.keys(objName); //Will return keys
         > Object.values(objName); //Will return values 
  
       **
       //To check if Properties are Enumerable                                                (propertyIsEnumerable).
    > (objName.propertyIsEnumerable(key)); //true or false

      Object.defineProperty(obj, prop, descriptor) //Syntax
       **
        //We can change the default state of the Object.

        var person1 = {};
       **
      Object.defineProperty(person1, "name", {
        value: "Nicholas",
        enumerable: true,
        configurable: true,
        writable: true
      }); //It will create 'name' in person1 Object with 'descriptor'.

      Object.defineProperty(person1, "name", {
      enumerable: false
      }); //We can define in Single Lines as well ( Depending upon our need )

      Object.defineProperty(person1, 'property1', {
        value: 42,
        writable: false
      });// 'property1' can not be overwritten.


      **
     //Preventing Object Modification      
       //Syntax
      > Object.preventExtensions(person1); //false
            /*It will not allow to add new properties to object 'person1'.
            */
      //isExtensible() (How to check?)
      > console.log(Object.isExtensible(obj)); //It will tell whether it's               extensible or not ( true / false )

**
       //Freezing the Object. ( Cant not add/remove. ( read-only ) )
        > Object.feeze(objName);

        //isFrozen() ( How to Check? )
       > console.log(Object.isFrozen(objName)); //Will return true or false.


   ** //Three methods which does not allow mathods to add/remove properties.
        > Object.preventExtensions(objName)
        > Object.seal(objName)
        > Object.freeze(objName)
        //To how to check, Use these methods.   
        console.log(Object.isExtensible(person1));
        console.log(Object.isSealed(person1));
        console.log(Object.isFrozen(person1));



     **//Using Prototypes with Constructors

          function Person(name){
            this.name = name;
          }

          Person.prototype.sayName = function(){
            return this.name;
          }

          let karan = new Person("Jaskaran");













/*
 ---------------------------------------------------------------------
*/
--------------------
                                //Number


Number.isNaN(24);
// False.

let number1 = -Infinity;
let number2 = Infinity;  
--------------------
                                   //String


String(77).padStart(6,0);
// 000077


let str = 'Jaskaran Singh Pannu';
str.repeat(10)

console.log("Karan- ".repeat(4));
//Karan- Karan- Karan- Karan-
-------------------
-------------------

-------------------
                                   //Object
  
  
let {name , age} = {name: "Faraji", age: 23};
console.log(name , age);
// → Faraji , 23


let obj = { name  : 'karan' };
consol.log( 'name' in obj);
//true;

     // Prototype ( Just to check if the certain properties are there.
Object.prototype.addNewMethod = function(){ return "Yeah"};
console.log('addNewMethod' in Object);
//true;
console.log('toString' in Object);
//true;

 //hasOwnProperty  ( It will just show the 'obj's properties ( code written ) , Not of it's parent ( Object).
let obj = { name : 'karan' };
obj.hasOwnProperty("name");
//true;
obj.hasOwnProperty('toString');
//False;

 //Get  // Set //Statics.
let obj = {
  //keyword 'get'
  get powerOne(){ return "Power 1" },
  powerTwo : function(){
    return "Power2, Old School."
  }
};
obj.powerOne;
// OR. (The Only difference is, If we are using keyword "get", We don't have to use "()" while calling any function.
obj.powerTwo();
------------------------
                                //Classes
class basics{
  constructor( name  ){
     this.name = name;
  }
  skillOne(skill){
    return this.name + " is " + skill
  }
}

class ChildOne extends basics{
  constructor( name , age , country ){
    super( name )
    this.age = age;
    this.country = country;
  }
  skillTwo(){
    return " Skill Two here... "
  }
}
----------------------
//instanceof
let arr = {};
console.log(arr instanceof Object)
// true.
let arr2 = []
console.log(arr2 instaceof Object);
// true ( Object is main base for all the non-primitives data types ( functions / arrays ).
------------------------
//Object.freeze
let object = Object.freeze({value: 5});
object.value = 10;
console.log(object.value);
// → 5
-----------------------
                               //HOF
  //Data.
const companies = [
  {name: "Company One", category: "Finance", start: 1981, end: 2005},
  {name: "Company Two", category: "Retail", start: 1992, end: 2008},
  {name: "Company Three", category: "Auto", start: 1999, end: 2007},
  {name: "Company Four", category: "Retail", start: 1989, end: 2010},
  {name: "Company Five", category: "Technology", start: 2009, end: 2014},
  {name: "Company Six", category: "Finance", start: 1987, end: 2010},
  {name: "Company Seven", category: "Auto", start: 1986, end: 1996},
  {name: "Company Eight", category: "Technology", start: 2011, end: 2016},
  {name: "Company Nine", category: "Retail", start: 1981, end: 1989}
];
const ages = [  10, 0,10, 40, 50 , 88, 9 , 20 ,89, 100 ,6];


//Sort
let sort = ages.sort((a , b ) => a - b );
sort = companies.sort( (a , b ) =>  a.start -b.start    )

//Reduce , Suming the Arrays.
let totatAges = ages.reduce(( total, item )=> total + item, 0 );
let totalYears = companies.reduce(( total , item ) => total + (item.end - item.start)
,0)

let out = nums.reduce(( firstItem , singleItem ) => {
 let max = firstItem > singleItem ? firstItem : singleItem;
 return max; 
})


// There is another method called => "Find" 

                        /* "Every" */ ( it return boolean value ) 
//It will test whether all elements in the array pass the provided function.
let output = students.every((item)=>{
  return item.grade >= 100;
})

                       /* "SOME"  */  ( it return boolean value )
//Similar to every, but returns true if ANY of the array elements pass the test function
let output = students.some((item)=>{
  return item.grade >= 100;
})



//Combined
let combined = ages
                   .sort((a,b) => a-b)
                   .filter( item => item <= 10 )
                   .map( item => item * 1 ) 
                   .reduce( (total,item)=> total + item ,0 );

//Destructing 
//Objects example
let  {name, age, ...evrythingElse} = {  name : 'Jaskaran',  age : 34, country : "U.S", cool : true }
console.log(name); //Jaskaran
console.log(age); //34
console.log(evrythingElse); // { country:'U.S', cool: true }

//Array Example
let arr = ["Jaskaran","Singh","Pannu"];
let  [firstName, ...everythingElse ]  = arr;
console.log(everythingElse); // ['Singh', 'Pannu']


//Param Destructing
let fullName = ({fN, lN }) =>{ return fN + " " + lN }

let objName = {
  fN : "Karan",
  lN :"Singh"
}

fullName(objName);



/* Async */


//1 way.
fetch("https://icanhazdadjoke.com/slack").then((res)=>{
        res.json().then((data)=>{
        console.log(data)
    })
});

//2nd Way
let link = "https://icanhazdadjoke.com/slack";
let xhr = new XMLHttpRequest();

xhr.open('GET',link, true);
xhr.send();

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
    console.log(xhr.responseText);
 }
}


// By Maxi.

//Installing Bootstrap ( locally )
 > npm install bootstrap@3 --save


// Data Binding.
..> Output Data
/* 
1.String Interpolation :
Should be a string, Or can be converted to string.
*/
 <h3>My Name is {{ name }}  {{'Singh'}}   {{ lastName() }} </h3> 

/*
2. Property Binding :
*/
  ( [propert] ='data' )

.HTML
<button class="btn btn-primary" [disabled]="!allowNewServer">Click here</button> <b [innerText] = "allowNewServer">  </b>

.TS
  setTimeout(()=>{ this.allowNewServer = true;
  },2000)
// 'disabled' is the property here, We are toggling the boolean value to disable or enabled the between ( if it's true then it will be disabled else btn will be enabled. )


..< React to Events
 ( (event) = 'expression' )

/*
3. Two way Binding : 
*/
  ( [(ng Model)] = 'data' )
/* 
> 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  ------------------ */



     
.config-heading {
  border-bottom: 1px solid #cccccc;
  text-align: center;
  padding-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

.uk-form-controls {
  margin-left: 0 !important;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:’’;
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
import { Component, OnInit } from '@angular/core';
import { SecurityService } from './data.service';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
  selector: 'app-root',
  template: `<div [innerHtml] = "safeValue"></div>`,
  providers: [SecurityService]
})
export class AppComponent implements OnInit {
  safeValue: SafeHtml;
  constructor(private secure: SecurityService) {
    this.safeValue = this.secure.getSafeHtml("<h1>Sanitization Success</h1>");
  }
  ngOnInit() {
  }
}
import { Directive, ElementRef, HostBinding, HostListener } from "@angular/core";

@Directive({
    selector: '[appDropdown]'
})

export class DropdownDirective {
@HostBinding('class.open') isActive = false;

@HostListener('document:click', ['$event']) onClick(event: Event) {
        this.isActive = this.elRef.nativeElement.contains(event.target) ? !this.isActive : false;
    }

    constructor(private elRef: ElementRef) {}
}
import { Directive, ElementRef, Renderer } from '@angular/core';

@Directive({
    selector: '[appChbgcolor]'
})
export class ChangeBgColorDirective {

    constructor(private el: ElementRef, private renderer: Renderer) {
        this.ChangeBgColor('red');
    }

    ChangeBgColor(color: string) {

        this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
    }
}
ng g module /main/customer --module=app --route=customer --routing=true
Hello, I can work on your Angular projects. I have already worked on angular and developed some merchandizing, ecommerce and educational web apps and also dashboards. I can work on different angular versions from Angularjs to Angular11.
I am also fullstack developer, if you will have anything from backend then it will be of no problem. just leave me a message and i will get back to you.
thank you.
`Pomoci zpětné uvozovky vytvoříte speciální řetězec, který lze psát na více 
 řádků a dají se do něj vkládat výrazy ${ 1+2 }, proměnné ${ x+y }, pole ${ seznam[0] },
 objekty ${ uzivatelske.jmeno } a dokonce ihned volané funkce ${ function() { return x+y; }() } 
 nebo metody ${ "sidon".toUpperCase() }.`
@ViewChild('main', {static: false}) main: ElementRef;

  constructor() {}

  skipLink() {
    this.main.nativeElement.focus()
    }
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { isDevMode, NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';

import {
  AngularFireAnalyticsModule,
  DEBUG_MODE as ANALYTICS_DEBUG_MODE,
  ScreenTrackingService,
  UserTrackingService
} from '@angular/fire/analytics';

import { FirestoreComponent } from './firestore/firestore.component';

import { AngularFireDatabaseModule, URL as DATABASE_URL } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
import { AngularFireMessagingModule } from '@angular/fire/messaging';
import { AngularFireFunctionsModule, ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/functions';
import { AngularFireRemoteConfigModule, SETTINGS as REMOTE_CONFIG_SETTINGS } from '@angular/fire/remote-config';
import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/performance';
import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';
import { DatabaseComponent } from './database/database.component';
import { StorageComponent } from './storage/storage.component';
import { RemoteConfigComponent } from './remote-config/remote-config.component';
import { HomeComponent } from './home/home.component';
import { AuthComponent } from './auth/auth.component';
import { MessagingComponent } from './messaging/messaging.component';

const shouldUseEmulator = () => false;

@NgModule({
  declarations: [
    AppComponent,
    StorageComponent,
    FirestoreComponent,
    DatabaseComponent,
    RemoteConfigComponent,
    HomeComponent,
    AuthComponent,
    MessagingComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserTransferStateModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireStorageModule,
    AngularFireAnalyticsModule,
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
    AngularFireMessagingModule,
    AngularFireFunctionsModule,
    AngularFireRemoteConfigModule,
    AngularFirePerformanceModule,
    AngularFireAuthGuardModule
  ],
  providers: [
    UserTrackingService,
    ScreenTrackingService,
    PerformanceMonitoringService,
    {
      provide: ANALYTICS_DEBUG_MODE,
      useFactory: () => isDevMode()
    },
    {
      provide: DATABASE_URL,
      useFactory: () => shouldUseEmulator() ? `http://localhost:9000?ns=${environment.firebase.projectId}` : undefined
    },
    { provide: FIRESTORE_SETTINGS, useFactory: () => shouldUseEmulator() ? { host: 'localhost:8080', ssl: false } : {} },
    { provide: FUNCTIONS_ORIGIN, useFactory: () => shouldUseEmulator() ? 'http://localhost:9999' : undefined },
    { provide: REMOTE_CONFIG_SETTINGS, useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {} }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}
    this.form.controls.txtName.valueChanges.subscribe((value) => {
	// Logic here

    });
star

Sun Jun 27 2021 07:14:31 GMT+0000 (UTC)

#angular
star

Tue Jun 22 2021 14:58:33 GMT+0000 (UTC)

#angular
star

Sun Jun 13 2021 15:38:33 GMT+0000 (UTC)

#angular #typescript
star

Wed Jun 09 2021 16:35:55 GMT+0000 (UTC)

#angular #typescript
star

Tue May 04 2021 01:13:44 GMT+0000 (UTC)

#angular #typescript
star

Sat May 01 2021 18:31:57 GMT+0000 (UTC)

#angular #typescript
star

Mon Apr 26 2021 03:40:13 GMT+0000 (UTC)

#angular #commandline
star

Tue Mar 16 2021 15:07:01 GMT+0000 (UTC)

#javascript #angular
star

Tue Mar 16 2021 13:28:35 GMT+0000 (UTC)

#typescript #angular
star

Sun Mar 07 2021 08:22:25 GMT+0000 (UTC) https://www.syncfusion.com/blogs/post/top-5-best-practices-angular-app-security.aspx

#angular #security
star

Fri Feb 26 2021 10:42:08 GMT+0000 (UTC)

#typescript #angular
star

Mon Feb 22 2021 09:26:38 GMT+0000 (UTC)

#angular
star

Fri Jan 01 2021 06:32:12 GMT+0000 (UTC)

#angular
star

Sun Nov 08 2020 08:59:40 GMT+0000 (UTC)

#angular
star

Fri Oct 23 2020 10:04:57 GMT+0000 (UTC) https://github.com/angular/angularfire/blob/master/sample/src/app/app.module.ts

#angular #javascript
star

Sat Jul 11 2020 07:29:29 GMT+0000 (UTC)

#angular
star

Tue May 26 2020 16:45:33 GMT+0000 (UTC) https://www.thiscodeworks.com/extension/initializing

#angular

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension