ZhenDeng

StringBuilder stringBuilder = new StringBuilder();
stringBuilder.Append("<div style='padding: 0; margin: 0; width:100%; height: 100%; background:#fbfaf7;'>");
stringBuilder.Append("<table width='100%' height='100%' align='center' cellspacing='0' cellpadding='0' bgcolor='#fbfaf7'>");
stringBuilder.Append("<tbody>");
stringBuilder.Append("<tr><td style='font:12px/1.5 Arial,Helvetica,sans-serif;color:#454545'>&nbsp;</td></tr>");
stringBuilder.Append("<tr>");
stringBuilder.Append("<td style='color:#343731;'><table width='600px' bgcolor='#ffffff' cellspacing='0' cellpadding='0' align='center' border='0' style='border:1px solid #232323;text-align:center'><tbody><tr><td style='padding:10px;color:#343731'>");
stringBuilder.Append("<h2 style='font-weight:400;text-transform:uppercase'>Trojan Trading Company PTY LTD</h2>");
stringBuilder.Append("</td></tr>");
stringBuilder.Append("<tr style='text-align:left'><td style='font:12px/1.5 Arial,Helvetica,sans-serif;color:#454545'><table width='90%'><tbody>");

ZhenDeng

/*HTML*/

<button class="close-button" (click)="onNoClick()">
  <span aria-hidden="true">&times;</span>
</button>
<div mat-dialog-title>
  <div class="modal-header">
    <h6 class="modal-title">Air freight terms</h6>
  </div>
  <div class="modal-body">

ZhenDeng

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}));
  }

ZhenDeng

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;

ZhenDeng

import { set } from 'lodash';
set(NgbPopover.prototype, '_unregisterListenersFn', function() {});

ZhenDeng

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>

ZhenDeng

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

ZhenDeng

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);

ZhenDeng

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

ZhenDeng

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>