Zhen Deng ZhenDeng

## APP_CONFIG
1. in module provider

{ provide: APP_CONFIG, useValue: AppConfig }

2. app.config.ts

import { InjectionToken } from "@angular/core";
import { IAuthConfig } from "../service/Authentication/auth.config";
import { environment } from 'src/environments/environment';

## set path for angular cli
1. Right Clicked on My Computer (windows)
2. Selected Advanced System Settings
3. Clicked "Environment Variables"
4. Under "Path" variable, made the FIRST value listed %AppData%\npm

## Warn user of unsaved changes before leaving page
***Component:

import { ComponentCanDeactivate } from './pending-changes.guard';
import { HostListener } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class MyComponent implements ComponentCanDeactivate {
  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {

## Expression has changed after it was checked error
ngAfterViewInit() {
  setTimeout(() => {

  });
}

## Pipe Implementation
Pipe File:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'TableFilterMultiple'
})
export class TablefilterMultiplePipe implements PipeTransform {

  transform(items: any[], fields: any[], value: string): any[] {

## table template
<html>

<head>
  <style>
    body {
      font-family: 'Segoe UI' !important;
      width: 900px;
      margin: 0 auto;
      background-color: #E7E6E3;
      padding: 15px;

## verify request header value
Request.Headers.TryGetValue("some-header-name", out var headers);
if(headers.Count > 1 || string.IsNullOrWhiteSpace(headers.FirstOrDefault())){
   return new UnauthorizedResult();
}

## ng-select search
HTML:

<ng-select class="customDropdwon" typeToSearchText="Please enter 3 or more characters" formControlName="txtAccountSearch" [items]="accountList"
  bindLabel="accountName" [typeahead]="peopleInput$" bindValue="accountId"
  placeholder="Search account by name or id *" [loading]="isLoading" (change)="accountSelected()">
  <ng-template ng-option-tmp let-item="item">
    <small>{{ item.accountName }}</small>
    <small> | {{item.accountId}}</small>
  </ng-template>
</ng-select>

## solve autofill issue in material autocomplete
import { Component, Inject, ViewChild } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { MatAutocompleteTrigger } from '@angular/material';

@Component({
  ...
  template: `
    <input
      autocomplete="address-level1"
      (input)="onInput($event)"

## bind event using directive
import { Directive, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[routeTransformer]'
})
export class RouteTransformerDirective {

  constructor(private el: ElementRef, private router: Router) { }
	1. in module provider

	{ provide: APP_CONFIG, useValue: AppConfig }

	2. app.config.ts

	import { InjectionToken } from "@angular/core";
	import { IAuthConfig } from "../service/Authentication/auth.config";
	import { environment } from 'src/environments/environment';
	1. Right Clicked on My Computer (windows)
	2. Selected Advanced System Settings
	3. Clicked "Environment Variables"
	4. Under "Path" variable, made the FIRST value listed %AppData%\npm
	***Component:

	import { ComponentCanDeactivate } from './pending-changes.guard';
	import { HostListener } from '@angular/core';
	import { Observable } from 'rxjs/Observable';

	export class MyComponent implements ComponentCanDeactivate {
	// @HostListener allows us to also guard against browser refresh, close, etc.
	@HostListener('window:beforeunload')
	canDeactivate(): Observable<boolean> \| boolean {
	Pipe File:

	import { Pipe, PipeTransform } from '@angular/core';

	@Pipe({
	name: 'TableFilterMultiple'
	})
	export class TablefilterMultiplePipe implements PipeTransform {

	transform(items: any[], fields: any[], value: string): any[] {
	<html>

	<head>
	<style>
	body {
	font-family: 'Segoe UI' !important;
	width: 900px;
	margin: 0 auto;
	background-color: #E7E6E3;
	padding: 15px;
	HTML:

	<ng-select class="customDropdwon" typeToSearchText="Please enter 3 or more characters" formControlName="txtAccountSearch" [items]="accountList"
	bindLabel="accountName" [typeahead]="peopleInput$" bindValue="accountId"
	placeholder="Search account by name or id *" [loading]="isLoading" (change)="accountSelected()">
	<ng-template ng-option-tmp let-item="item">
	<small>{{ item.accountName }}</small>
	<small> \| {{item.accountId}}</small>
	</ng-template>
	</ng-select>
	import { Component, Inject, ViewChild } from '@angular/core';
	import { DOCUMENT } from '@angular/common';
	import { MatAutocompleteTrigger } from '@angular/material';

	@Component({
	...
	template: `
	<input
	autocomplete="address-level1"
	(input)="onInput($event)"
	import { Directive, ElementRef, HostListener } from '@angular/core';
	import { Router } from '@angular/router';

	@Directive({
	selector: '[routeTransformer]'
	})
	export class RouteTransformerDirective {

	constructor(private el: ElementRef, private router: Router) { }