Skip to content

Instantly share code, notes, and snippets.

Zhen Deng ZhenDeng

Block or report user

Report or block ZhenDeng

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View 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>
View angular
in component
downloadCartToExcel(): void {
this.loadContent = false;
this.fileService.exportCartToExcel(this.cartId).subscribe(data => {
const fileName = `DD_ShoppingCartItems_${this.cartName}.xlsx`;
this.fileService.saveAsExcelFile(data, fileName);
View 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;
View 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}));
}
View reactive form with FormGroupName
HTML:
<div [formGroup]="addressFormGroup">
<div formGroupName="addressGroup">
<mat-form-field [floatLabel]="'always'">
<input matInput formControlName="companyName" placeholder="Company Name" (blur)="isNotValidField('addressGroup.companyName', account_validation_messages.companyName)"/>
</mat-form-field>
<mat-checkbox [(ngModel)]="collectTheOrder" formControlName="collectTheOrder" style="display: block;margin-left: 18px;">
I will collect this order
</mat-checkbox>
View Material terms and conditions template
/*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">
View order confirmation template
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>");
View cut connection if the app calling is obsolete
in component
//unsubscribe
ngUnsubscribe: Subject<void> = new Subject<void>();
this.adminService.GetUserByAccount(_.toNumber(this.shareService.readCookie("userId"))).takeUntil(this.ngUnsubscribe).subscribe()
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
View Loading screen
1. LoadingScreenComponent
import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy, Output, EventEmitter, Input } from '@angular/core';
import { LoadingScreenService } from '../../services/loading-screen.service';
import { debounceTime } from 'rxjs/operators';
@Component({
selector: 'loading-screen',
You can’t perform that action at this time.