Zhen Deng ZhenDeng

## 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)"

## Service file
public ExcelPackage AddWorksheetForCarts(ExcelPackage pck, int cartId, string CartName)
{
    // Create Headers
    string[] headerList = { "Cart Name", "Parent Code", "Stock Code", "Item Desc", "RRP (Ex tax)", "RRP (Inc tax)", "Reseller Price(Ex tax)", "Quantity", "Subtotal (Ex tax)" };

    // Capture Number Of Columns
    // We'll Use This Later When Creating Rows
    int iColCount = headerList.Length;

    ExcelWorksheet ws = pck.Workbook.Worksheets.Add("Cart Name:" + CartName);

## 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) { }

## angular material snack bar design and implementation
Toast Component

Html:

<div class="toast">
  <div class="toast-icon">
    <i class="far fa-times-circle" *ngIf="data?.type=='Error'"></i>
    <i class="far fa-check-circle" *ngIf="data?.type=='Success'"></i>
    <i class="fas fa-exclamation-triangle" *ngIf="data?.type=='Warning'"></i>
    <i class="fas fa-info-circle" *ngIf="data?.type=='Info'"></i>

## fix error of angular powered bootstrap tooltip -- unregisterlistenersfn is not a function
import { set } from 'lodash';
set(NgbPopover.prototype, '_unregisterListenersFn', function() {});

## Initial plugin in component
in HTM:

<span #popover="ngbPopover" id="downloadButton" placement="bottom" [ngbPopover]="popContent"
                  triggers="manual" (click)="openPop();"
                  [ngClass]="{'active-icon' : iconCanbeActive, 'default-icon': !iconCanbeActive }"></span>

in component:

@ViewChild('popover') public popover: NgbPopover;

## encode decode string
import { HttpInterceptor, HttpRequest, HttpEvent, HttpHandler, HttpParams, HttpParameterCodec } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class EncodeHttpParamsInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const params = new HttpParams({encoder: new CustomEncoder(), fromString: req.params.toString()});
    return next.handle(req.clone({params}));
  }
	<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)"
	public ExcelPackage AddWorksheetForCarts(ExcelPackage pck, int cartId, string CartName)
	{
	// Create Headers
	string[] headerList = { "Cart Name", "Parent Code", "Stock Code", "Item Desc", "RRP (Ex tax)", "RRP (Inc tax)", "Reseller Price(Ex tax)", "Quantity", "Subtotal (Ex tax)" };

	// Capture Number Of Columns
	// We'll Use This Later When Creating Rows
	int iColCount = headerList.Length;

	ExcelWorksheet ws = pck.Workbook.Worksheets.Add("Cart Name:" + CartName);
	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) { }
	Toast Component

	Html:

	<div class="toast">
	<div class="toast-icon">
	<i class="far fa-times-circle" *ngIf="data?.type=='Error'"></i>
	<i class="far fa-check-circle" *ngIf="data?.type=='Success'"></i>
	<i class="fas fa-exclamation-triangle" *ngIf="data?.type=='Warning'"></i>
	<i class="fas fa-info-circle" *ngIf="data?.type=='Info'"></i>
	import { set } from 'lodash';
	set(NgbPopover.prototype, '_unregisterListenersFn', function() {});
	in HTM:

	<span #popover="ngbPopover" id="downloadButton" placement="bottom" [ngbPopover]="popContent"
	triggers="manual" (click)="openPop();"
	[ngClass]="{'active-icon' : iconCanbeActive, 'default-icon': !iconCanbeActive }"></span>

	in component:

	@ViewChild('popover') public popover: NgbPopover;
	import { HttpInterceptor, HttpRequest, HttpEvent, HttpHandler, HttpParams, HttpParameterCodec } from "@angular/common/http";
	import { Injectable } from "@angular/core";
	import { Observable } from "rxjs";

	@Injectable()
	export class EncodeHttpParamsInterceptor implements HttpInterceptor {
	intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
	const params = new HttpParams({encoder: new CustomEncoder(), fromString: req.params.toString()});
	return next.handle(req.clone({params}));
	}