Snippets Collections
import { fromEvent, delayWhen, interval, of, Subject } from 'rxjs';

const sourceSebjec = new Subject<boolean>();
const sourceAction$ = sourceSebjec.asObservable();

fromEvent(document, 'click').subscribe({
  next: (x) => {
    console.log('CLik next: .. iniciou souce', x);
    sourceSebjec.next(false);
  },
  error: (x) => console.log('Clik erro:', x),
  complete: () => console.log('Clik complete'),
});

sourceAction$.pipe(delayWhen((v) => (v ? interval(2000) : of(0)))).subscribe({
  next: (x) => {
    console.log('Souce next:', x);
  },
  error: (x) => console.log('Souce erro:', x),
  complete: () => console.log('Souce complete'),
});
import { Injectable } from '@angular/core';
import { HttpErrorResponse, HttpClient } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, shareReplay } from 'rxjs/operators';

import { Product } from './models/product.model';

@Injectable({
  providedIn: 'root'
})
export class ProductsService {
  private const API = 'api/products';

  allProducts$ = this.http.get<Product[]>(this.API).pipe(
    shareReplay(1),
    catchError(this.handleError),
    );

  constructor(private http: HttpClient){}

  private handleError(err: HttpErrorResponse): Observable<never>{
    let errorMessage: string;
    if(err.error instanceof ErrorEvent){
      errorMessage = `Um error ocorreu: ${err.error.message}`;
    }else{
      errorMessage = `Servidor retornou codigo ${err.status}: ${err.message}`;
    }
    console.warn(err);
    return throwError(() => errorMessage)
  }

}
// html
    <ng-container *ngIf="vm$ | async as vm">
      <p *ngIf="vm.user; else userLoading">
      	Welcome back {{ vm.user }}
	  </p>

      <ng-template #userLoading>
        <p>Loading...</p>
        <p *ngIf="vm.userError">There was an error: {{ vm.userError }}</p>
      </ng-template>
    </ng-container>

// component
  user$ = this.userService.userErrored$.pipe(
    startWith(null),
    catchError(() => EMPTY)
  );
  userError$ = this.userService.userErrored$.pipe(
    ignoreElements(),
    startWith(null),
    catchError((err) => of(err))
  );

  vm$ = combineLatest([this.user$,this.userError$]).pipe(
    map(([user, userError]) => ({user, userError}));
  dataSource$ = this.dataSourceAction$.pipe(
    startWith([]),
    switchMap(() => {
      this.isLoadingResultsSubject.next(true);
      return this.getProduct(1).pipe(catchError(() => of(null)))
    }),
    map( data => {
      this.isLoadingResultsSubject.next(false);
      if(data === null) return []
      return data;
    }),);
https://danielk.tech/pt-br/como-ter-uma-nova-tentativa-de-requisicao-http-no-angular-varios-codigos-como-exemplo
const { fromEvent } = rxjs;
const { switchMap, takeUntil, map } = rxjs.operators;

const card = document.querySelector('.card');

const mouseDown$ = fromEvent(card,'mousedown');
const mouseUp$ = fromEvent(document, 'mouseup');
const mouseMove$ = fromEvent(document, 'mousemove');
const dragAndDrop$ = mouseDown$.pipe(
  map(e => ({})),
  switchMap( start => mouseMove$.pipe(
    takeUntil(mouseUp$)
  ))
);
dragAndDrop$.subscribe(v => console.log(v))
    private _categoryId: string;
    
    @Input() set categoryId(value: string) {
    
       this._categoryId = value;
       this.doSomething(this._categoryId);
    
    }
    
    get categoryId(): string {
    
        return this._categoryId;
    
    }
// usage
loadGame(): void {
  this.games = []
  this.loadHandler.start()
  this.http.get<Game[]>.get(this.url).subscribe(
    games => {
      this.loadHandler.finish();
      this.games = games;
    })
}

// service
export class LoadHandler {
  private _isLoading$ = new BehaviorSubject(false);
  isLoading$: Observable<boolean> = this._isLoading$.pipe(
  	switchMap( isLoading => {
      if(!isLoading) {
        return of(false)
      }else{
        return of(true).pipe(delay(1000));
      }
    })
  )

  start(){
    this._isLoading.next(true);
  }
  finish(){
    this._isLoading.next(false);
  }
}
https://fakestoreapi.com/
// component
export class HeroComponent {
 constructor(private activatedRoute: ActivatedRoute) {}
 ngOnInit() {
   this.activatedRoute.data.subscribe(({ hero }) => {
     // do something with your resolved data ...
   })
   // or
   this.hero = this.activatedRoute.data['hero']
 }

}

// resolve
@Injectable({ providedIn: 'root' })
export class HeroResolver implements Resolve<Hero> {
  constructor(private service: HeroService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<Hero>|Promise<Hero>|Hero {
    return this.service.getHero(route.paramMap.get('id')).pipe(
      catchError(error => of('No data'))
    );
  }
}

// rota
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'detail/:id',
        component: HeroDetailComponent,
        resolve: {
          hero: HeroResolver
        }
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
item = "Lego";
price = 31.99;

/** Declare an Observable
* Data we can observe
* over time
*/
qty$ = new Observable<number>(1);

/** Emit when the action occurs
* Hey Observable,
* here is a new value
*/
onQuantityChanged(quantity){
  qty$.emit(quantity);
}

/** React to emissions
* Whenever you
* change, I`II change
*/
exPreice$ = qty$.pipe(
  map(q => q * price)
);
tax$ = exPrice$.pipe(
  map(q => q * 10.75%)
);
deliveryFree$ = exPrice$.pipe(
  map(q => q < 35 ? 5.99 : 0)
);

totalPrice$ = combine(
  exPrice$,
  deliveryFree$,
  tax$
).pipe(map( [p,d,t] => p+d+t ));

// component
@ViewChild('inputName', {static: false})
obj: ElementRef;

ngOnInit(){
  this.skipLink()
}

skipLink() {
 this.obj.nativeElement.focus()
}
// html
postWithCategory$ | async

// component
postWithCategory$ = this.postService.postWithCategory$

// post.service.ts
postWithCategory$ = combineLatest([
  this.allPosts$,
  this.categoryService.allCategories$
]).pipe(
  map( ([posts, cat]) => this.mapCategories(posts, cat) )
)

allPosts$ = this.http.get<Post[]>(this.postsUrl).pipe(
  catchError(this.handleError)
);

mapCategories(posts: Post[], cat: PostCatergory[]): Post[]{
  return posts.map( post => ({
    ...post,
    category: cat.find( c => post.categoryId === c.id)?.name
  }) as Post )
}

// category.service
allCategories$ = this.http.get<PostCategory[]>(this.catUrl).pipe(
  catchError(this.handleError),
  shareReplay(1)
);
// html
<div *ngFor"let post of postsForUser$ | async">
 {{ post.title }}
</div>

// component
postsForUser$ = this.entedUser$.pipe(
 switchMap(userName => this.userService.getUserId(userName)),
 switchMap(userId => this.userService.getPostsForUserId(userId))
)

// service
private _userSubject = new Subject<string>();
enteredUser$ = this._userSubject.asObservable();

userChanged(userName: string): void{
  this.enteredUser.next(userName);
}

getUserId(userName: string): Observable<number>{
  return this.http.get<User[]>(`${userUrl}?userName=^${userName}$`).pipe(
   catchError(this.handleError),
   map(users => (users.lenght === 0) ? 0 : users[0].id)
  )
}

getPostsForUserId(userId: number): Observable<Post[]>{
  return this.http.get<Post[]>(`${postsUresgatrl}?userId=^${userId}$`).pipe(
   catchError(this.handleError)
  )
}
user$ = this.http.get<User[]>(url).pipe(
tap(data => console.log(JSON.stringfy(data))),
catchError(this.handleError)
)

privat handleError(err: HttpErrorResponse): Observable<never>{
  let errorMsg = `An error occurred: ${err.error.message}`;
  console.log(err);
  return throwError(()=> errorMsg)
}
//usage
import{MaybeObservable} from '/help/maybe-observable'
import{asObservable} from '/help/as-observable'
getGame$(catId: MaybeObservable<string>){
  return asObservable(catId).pipe(
    switchMap(id => of(this.getGame(id)))
  );
}

// help/as-observable.ts
import{isObservable,of} from 'rxjs'
import{MaybeObservable} from './maybe-observable'
export function asObservable<T>(value: MaybeObservable<T>){
  return isObservable(value) ? value : of(value);
}

// help/maybe-observable.ts
import{Observable} from 'rxjs';
export type MaybeObservable<T> = T | Observable<T>;
catchError( (err, source) => source)
catchError(this.handleError)


  private handleError(err) {
    // in a real world app, we may send the server to some remote logging infrastructure
    // instead of just logging it to the console
    let errorMessage: string;
    if (err.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      errorMessage = `An error occurred: ${err.error.message}`;
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      errorMessage = `Backend returned code ${err.status}: ${err.body.error}`;
    }
    console.error(err);
    return throwError(errorMessage);
  }
//html
<div *ngIf="let notice of (news$ | async)"> ...

//compoent
refreshTImer$ = timer(0, 30000)
news$ = this.service.news$
/*ngOnInit*/
this.sub = this.refreshTimer$.subscribe(this.service.refresh$)
/*ngOnDestroy*/
this.sub.unsubscribe()

//service
loadNews$ = this.http.get('/newsfeed')...
refresh$ = new BeharviorSubject(null);
news$ = this.refresh$.pipe(
 exhaustMap( () => this.loadNews$)
)
// app.component.html
<div *ngIf="productSuppliers$ | async as suppliers">
 	<div *ngFor="let supplier of suppliers">
		{{ supplier.name }}
	</div>
</div>
 
 
// app.component.ts
productSuppliers$ = this.productService.productSuppliers$;
 
 
// product.service.ts
selectedProduct$ = ...
productSuppliers$ = this.selectedProduct$.pipe(
  switchMap(product =>
	forkJoin(
		product.supplierIds.map(
			supplierId => this.http.get<Supplier>(`${url}/${supplierId}`))
   )
);
// app.component.html
<div *ngIf="productSupplier$ | async as supplier">
  	{{ supplier.name }}
  </button>
</div>
 
 
// app.component.ts
productSupplier$ = this.productService.productSupplier$;
 
 
// product.service.ts
selectedProduct$ = ...
productSupplier$ = this.selectedProduct$.pipe(
  switchMap(product => this.http.get<Supplier>(`${url}/${product.supplierId}`))
);
// app.component.html
<div *ngIf="selectedProduct$ | async as product">
  	{{ product.name }}
  </button>
</div>


// app.component.ts
selectedProduct$ = this.productService.selectedProduct$;


// product.service.ts
products$ = this.categorySelectedAction$.pipe(
  switchMap( catId => this.http.get<Product[]>(this.url+'?cat='+catId))
  .pipe(...);
        
private productSelectedSubject = new Subject<number>();
productSelectedAction$ = this.productSelectedSubject.asObservable();

selectedProduct$ = combineLatest([
  this.products$,
  this.productSelectedAction
]).pipe(
  map(([products, selectedProductId]) => 
   products.find(product => product.id === selectedProductId)
  ));

// app.component.html
<div *ngIf="products$ | async as products">
  <button *ngFor='let product of products'>
  	{{ product.name }}
  </button>
</div>


// app.component.ts
products$ = this.productService.products$;


// product.service.ts
private categorySubject = new Subject<number>();
categorySelectedAction$ = this.categorySubject.asObservable();

products$ = this.categorySelectedAction$.pipe(
  switchMap( catId => this.http.get<Product[]>(this.url+'?cat='+catId))
  .pipe(
  	tap(console.log),
  	catchError(this.handleError)
   )
);

selectedCategoryChanged(categoryId: number): void{
  this.categorySUbject.next(categoryId);
}
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) {}
}
// app.component.html
<div *ngIf="products$ | async as products">
  <button *ngFor='let product of products'>
  	{{ product.name }}
  </button>
</div>

// app.component.ts
products$ = this.productService.products$;

// app.service.ts
products$ = this.http.get<Product[]>(this.url)
  .pipe(
  	tap(console.log),
  	catchError(this.handleError)
   );
    {
        "/api/*": {
            "target": "https://localhost:44358/",
            "secure": false
          }
    }

 "start": "ng serve --proxy-config proxy.config.json",
#imports 
import { Observable, of } from 'rxjs';
import { tap, delay } from 'rxjs/operators';

#service
isUserLoggedIn: boolean = false;

  login(userName: string, password: string) {
     console.log(userName);
     console.log(password);
     this.isUserLoggedIn = userName == 'admin' && password == 'admin';
     localStorage.setItem('isUserLoggedIn', this.isUserLoggedIn ? "true" : "false"); 

  return of(this.isUserLoggedIn).pipe(
     delay(1000),
     tap(val => { 
        console.log("Is User Authentication is successful: " + val); 
     })
  );
  }

  logout(): void {
  this.isUserLoggedIn = false;
     localStorage.removeItem('isUserLoggedIn'); 
  }
To make HttpClient available everywhere in the app,

open the root AppModule,

import the HttpClientModule from @angular/common/http,

import { HttpClientModule } from '@angular/common/http';

add it to the @NgModule.imports array.

imports:[HttpClientModule,  ]
  getPerson(id: number) {
    return this.http.get<Person>(`${this.baseUrl}api/profile/person/${id}`);

  }
    this.http.getAbout(person.id).subscribe((data: About[]) => { this.about = data[0]; this.loader = false }, error => {
      retry(3),
        this.errorMessage = error;
    });
typescript adds types to JavaScript.
/////////////////////////////////////////// function arguments
Function arguments & return types:
let greeting : (name: string) => string;
greeting = function (name: string) {
    return `Hi ${name}`;
};
/////////////////////////////////////////// object Type
let employee: object;
object type represents any value that is not a primitive type,while Object type describes functionalities that available on all objects;toString,valueof...

//////////////////////////////////// array & tuple
array can store mixed type values
let arr: type[]
A tupple is an array with a fixed number of elements whose types are known.

//////////////////////////////////// any type
Use the any type to store a value that you don’t actually know its type at the compile-time

//////////////////////////////////// void type
 you use the void type as the return type of functions that do not return a value. 
 
//////////////////////////////////// union types
  combine multiple types into one type
  let result: number | string;
/////////////////////////////////////////// type aliases
define a new name for an existing type,useful for union types.
type newName=existing type;
type alphanumeric = string | number;
/////////////////////////////////////////////// String Literal Types
define a type that accepts only a specified string literal;
let mouseEvent: 'click' | 'dblclick' | 'mouseup' | 'mousedown';

/////////////////////////////////////  Type inference
TypeScript guesses the type,when you initialize the variable.

/////////////////////////////////////  optional parameters
Use the parameter?: type syntax to make a parameter optional.
Use the expression typeof(parameter) !== 'undefined' to check if the parameter has been initialized.


/////////////////////////////////////  default parameters
function name(parameter1=defaultValue1,...) {
   // do something
}
To use the default initialized value of a parameter, you omit the argument when calling the function or pass the undefined into the function.

/////////////////////////////////////  classes
ES5 allows classes and Ts adds type annotations

/////////////////////////////////////  inheritance
you use the extends keyword.
To call the constructor of the parent class in the constructor of the child class, you use the super() syntax. 
Method overriding:just redefine the method

/////////////////////////////Static Methods and Properties
a static property is shared among all instances of a class.

///////////////////////////// abstract classe
define common behaviors for derived classes to extend,
  

///////////////////////////// type guards
 used to identify or narrow down the type of a variable using instanceOf and typeOf.
 User can define type-guards:
 function isCustomer(partner: any): partner is Customer {
    return partner instanceof Customer;
}
///////////////////// casting types
to convert a variable from one type to another.using as pr <>;
# method 1
import * as wasm from 'wasm/pkg'

ngOnInit()
  wasm.greet()


#method 2
import { greet } from 'wasm/pkg/wasm_bg.wasm'; #|| from 'wasm/pkg'
  ngOnInit()
    greet()

# method 3
ngOnInit() {
  const rust = import('../../wasm/pkg');
  rust.then(m => m.greet()).catch(console.error);

  rust.then(m => console.log(m.add(2, 2), 'added'));
}

# Terminal command to build lib.rs 
wasm-pack build
npx cap open ios #abrir o projecto no xcode

npx cap open android #abrir o projecto no android
<dict>
+  <key>NSCameraUsageDescription</key>
+  <string>To be able to scan barcodes</string>
</dict>
<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools" <-- adicionas esta linha não removendo nada e seguindo esta lógica

  package="com.example">

  <application
+    android:hardwareAccelerated="true" <-- adicionas esta linha não removendo nada e seguindo esta lógica
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" /><-- adicionas esta linha não removendo nada e seguindo esta lógica

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" /><-- adicionas esta linha não removendo nada e seguindo esta lógica
</manifest>
ionic build --prod

#caso quiseres colocar a app para android dás o seguinte comando:
npm install @capacitor/android
npx cap add android

#caso quiseres colocar a app para iOS dás o seguinte comando:
npm install @capacitor/ios
npx cap add ios


#no final dão estes dois ultimos comandos

npx cap sync
npx cap copy Android ou ios #dependendo do qual escolheram
...

<ion-content class="scanner-hide" *ngIf="scanStatus == false">
  <div class="padding-container center">
    <ion-button color="primary" (click)="scanCode()"><ion-icon slot="start" name="qr-code-outline"></ion-icon> Scanear Código</ion-button> <!-- Botão que chama a função do scanner-->
  </div>
  <ion-card>
    <ion-card-content><h1>{{ result }}</h1></ion-card-content> <!-- mostra o resultado do scan -->
  </ion-card>
  
  <div class="scanner-ui"> <!-- Quando estamos a scanear, chama esta classe-->
    ...Scanner Interface
    </div>
    <div class="ad-spot"></div>
</ion-content>
...
import { BarcodeScanner } from '@capacitor-community/barcode-scanner';



...



export class HomePage {
  public scanStatus:boolean = false; // no inicio da página, coloca o estado do código qr para falso
  public result:any;

  constructor() {}


  async scanCode () {

    this.setPermissions(); /* chama as permissões à camera */
  
    BarcodeScanner.hideBackground(); // coloca o fundo transparente
    this.scanStatus = true; // ao mudar esta variável para true, estamos a puxar o qr code scanner 
    document.body.classList.add("qrscanner"); // adiciona a classe css que fizemos no global
    const result = await BarcodeScanner.startScan(); // começa a fazer scan e espera por um result
  
  // se o qr scanner detectou algum número, então ele faz o código abaixo
    if (result.hasContent) {

        
        this.scanStatus = false; //como é obvio, ele tem de desligar o scanner ao obter o resultado
        BarcodeScanner.stopScan(); //para o scan
        this.result = result.content; // passa o resultado para a variável global result
        BarcodeScanner.showBackground(); //volta a mostrar o fundo
        document.body.classList.remove("qrscanner"); //remove a classe css que criamos no global
    
    }
  }

  async setPermissions(){
    const status = await BarcodeScanner.checkPermission({ force: true }); /* força a permissão para true, caso o utilizador não aceite, o scanner não funciona */
    if (status.granted) {
      // the user granted permission
      return true; // se o utilizador aceitou as permissões retorna true
    }
  
      return false; // se o utilizador não aceitou retorna false
  }
}
.scanner-ui { display: none; }
.scanner-hide { visibility: visible; }

body.qrscanner { background-color: transparent; }
body.qrscanner .scanner-ui { display: block; }
body.qrscanner .scanner-hide { visibility: hidden; }
ionic start qrcode blank --type=ionic-angular
<router-outlet (activate)="onActivate($event)"></router-outlet>

onActivate(event) {
   // window.scroll(0,0);

   window.scroll({ 
           top: 0, 
           left: 0, 
           behavior: 'smooth' 
    });

    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    ...
}
import { HttpClient, ..., HttpBackend } from '@angular/common/http';

@Injectable()
export class TestService {

  private httpClient: HttpClient;

  constructor( handler: HttpBackend) { 
     this.httpClient = new HttpClient(handler);
  }
....
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: [
              require("postcss-import"),
              require("tailwindcss"),
              require("autoprefixer"),
            ],
          },
        },
      },
    ],
  },
};
//html

<nick-select class="beta-mr-28" [nickCrudField]="formulario.select" [options]="selectOptions">
</nick-select>

<span>opção selecionada: {{form.tournamentType.complexValue.value}}</span>

//JSON

"form:formulario": { //inicializa um form.
  "select": { //id do campo.
    "id": "select",
    "title": "Select", //Título, será exibido como label acima do select gerado.
    "metadata": { //Paremetros opcionais.	
      "defaultValue": 0 //index padrão do array options.
    }
  }
},
  //inicializa array
"selectOptions": [ 
  //objeto contendo as opções a serem exibidas no nosso select.
  {
    "key": 0,
    "value": "opção 1"
  },
  {
    "key": 1,
    "value": "opção 2"
  }
]

//saida: opção selecionada: opção 1
//html

<form>
  <nick-input style="width: auto;" class="beta-mr-28" [nickCrudField]="formulario.nome" placeholder="Informe seu nome">
  </nick-input>
</form>

<span>seu nome é: {{nome.value}}</span>

//JSON

//Formulário padrão

"form:formulario": { //inicializa um form.
  "nome": { //id do campo.
    "id": "nome",
    "title": "Nome", //Título, será exibido como label acima do input gerado.
    "metadata": { //Parametros opcionais.
    "required": true //Validator de campo requerido
    }
  }
}
//html

<span>Valor da variável: {{originNomeVar}}</span>

//JSON

{
    "onLoad": [
        {
            "index": 0,
            "actions": [
              	{
                    "set:nomeVar": {
                        "value": "1234"
                    }
                },
                {
                    "set:originNomeVar": {
                        "originField": "nomeVar"
                    }
                }
            ]
        }
    ]
}

//Saída Valor da variável: 1234
//html
<span>Valor da variável: {{nomeVar}}</span>

//JSON

{
    "onLoad": [
        {
            "index": 0,
            "actions": [
                {
                    "set:nomeVar": {
                        "value": "123"
                    }
                }
            ]
        }
    ]
}

//Saída: Valor da variável: 123
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 Jan 22 2023 02:07:21 GMT+0000 (UTC)

#angular #rxjs-pattern
star

Sun Jan 22 2023 00:14:43 GMT+0000 (UTC)

#angular #rxjs-pattern
star

Sat Jan 21 2023 08:03:25 GMT+0000 (UTC) https://youtu.be/SXOZaWLs4q0?t=740

#angular #rxjs-pattern
star

Fri Jan 20 2023 05:06:51 GMT+0000 (UTC)

#angular #rxjs-pattern
star

Tue Jan 10 2023 00:17:40 GMT+0000 (UTC) https://danielk.tech/pt-br/como-ter-uma-nova-tentativa-de-requisicao-http-no-angular-varios-codigos-como-exemplo

#angular #rxjs-pattern
star

Fri Jan 06 2023 21:05:59 GMT+0000 (UTC)

#angular #rxjs-pattern
star

Tue Jan 03 2023 06:07:16 GMT+0000 (UTC) https://stackoverflow.com/questions/38571812/how-to-detect-when-an-input-value-changes-in-angular

#angular #rxjs-pattern
star

Thu Dec 29 2022 03:15:25 GMT+0000 (UTC) https://youtu.be/-N6ZrGh2bjc?t=595

#angular #rxjs-pattern
star

Thu Dec 29 2022 02:43:10 GMT+0000 (UTC)

#angular #rxjs-pattern
star

Thu Dec 29 2022 02:42:35 GMT+0000 (UTC) https://angular.io/api/router/Resolve

#angular #rxjs-pattern
star

Mon Dec 26 2022 23:12:54 GMT+0000 (UTC) https://youtu.be/qxjt5vlG58s?t=2309

#angular #rxjs-pattern
star

Mon Dec 26 2022 19:44:12 GMT+0000 (UTC)

#angular #rxjs-pattern
star

Mon Dec 26 2022 19:37:43 GMT+0000 (UTC) https://youtu.be/SPy35fOjRyU?t=557

#angular #rxjs-pattern
star

Mon Dec 26 2022 19:15:03 GMT+0000 (UTC) https://youtu.be/SPy35fOjRyU?t=133

#angular #rxjs-pattern
star

Mon Dec 26 2022 18:00:11 GMT+0000 (UTC) https://youtu.be/bqIj-m7Uxzk?t=1039

#angular #rxjs-pattern
star

Mon Dec 26 2022 04:26:01 GMT+0000 (UTC) https://youtu.be/IxOBrYUxetc?t=953

#angular #rxjs-pattern
star

Sat Dec 24 2022 03:27:55 GMT+0000 (UTC) https://youtu.be/eWU2vlohOwQ?t=734

#angular #rxjs-pattern
star

Fri Dec 23 2022 16:36:37 GMT+0000 (UTC) https://youtu.be/B-nFj2o03i8?t=821

#angular #rxjs-pattern
star

Wed Dec 21 2022 15:26:38 GMT+0000 (UTC)

#angular #rxjs-pattern
star

Sat Dec 17 2022 03:51:27 GMT+0000 (UTC)

#angular
star

Sat Dec 17 2022 03:32:48 GMT+0000 (UTC) https://www.youtube.com/watch?v=uv_sblwIJag&t=232s

#angular
star

Fri Dec 16 2022 16:46:38 GMT+0000 (UTC)

#angular
star

Fri Dec 16 2022 16:19:38 GMT+0000 (UTC) https://youtu.be/uv_sblwIJag?t=221

#angular #rxjs
star

Thu Nov 03 2022 23:19:58 GMT+0000 (UTC)

#angular
star

Wed Oct 19 2022 10:27:20 GMT+0000 (UTC) https://maticz.com/token-development

#nodejs #angular #javascript #php #python #vue.js #react.js
star

Wed Oct 19 2022 10:25:51 GMT+0000 (UTC) https://maticz.com/how-to-create-nft-marketplace

#javascript #java #laravel #angular
star

Wed Oct 19 2022 10:19:52 GMT+0000 (UTC) https://bit.ly/3GLa8p1

#javascript #java #php #laravel #angular #nodejs
star

Thu Sep 29 2022 14:30:05 GMT+0000 (UTC)

#angular
star

Thu Sep 22 2022 13:57:05 GMT+0000 (UTC)

#angular
star

Thu Sep 22 2022 13:21:00 GMT+0000 (UTC)

#angular
star

Thu Sep 22 2022 13:00:11 GMT+0000 (UTC)

#angular
star

Sat Sep 17 2022 11:23:29 GMT+0000 (UTC)

#typescript #angular
star

Mon Jul 11 2022 18:59:17 GMT+0000 (UTC) https://rustwasm.github.io/docs/book/game-of-life/hello-world.html

#rust #wasm #wasm-pack #angular
star

Fri Jun 24 2022 14:38:23 GMT+0000 (UTC)

#bash #ionic #angular #capacitor
star

Wed Jun 22 2022 13:16:39 GMT+0000 (UTC) https://stackoverflow.com/questions/48048299/angular-5-scroll-to-top-on-every-route-click

#angular
star

Mon Jun 20 2022 18:31:51 GMT+0000 (UTC) https://stackoverflow.com/questions/66014183/error-when-installing-ng-add-ng-bootstrap-ng-bootstrap

#angular
star

Thu Jun 16 2022 08:44:09 GMT+0000 (UTC) https://stackoverflow.com/questions/46469349/how-to-make-an-angular-module-to-ignore-http-interceptor-added-in-a-core-module

#angular
star

Mon May 16 2022 14:27:31 GMT+0000 (UTC) https://stackoverflow.com/questions/65966720/error-ts2531-object-is-possibly-null-in-angular-reactive-forms

#angular
star

Mon May 16 2022 14:18:04 GMT+0000 (UTC) https://laracasts.com/discuss/channels/javascript/oh-reallyproperty-form-has-no-initializer-and-is-not-definitely-assigned-in-the-constructor-property-createcomponentform-formgroup

#angular
star

Tue Dec 07 2021 23:31:50 GMT+0000 (UTC) https://shrutibalasa.hashnode.dev/install-and-setup-tailwind-css-2-with-angular-11

#webpack #angular #tailwindcss
star

Wed Sep 01 2021 14:34:55 GMT+0000 (UTC)

#html #angular #json
star

Wed Sep 01 2021 13:15:41 GMT+0000 (UTC)

#html #angular #json
star

Wed Sep 01 2021 12:56:32 GMT+0000 (UTC)

#html #angular #json
star

Wed Sep 01 2021 12:23:58 GMT+0000 (UTC)

#html #angular #json
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

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