typescript 角小提示

Posted 2021-05-20

1. 
add an condition to click function to control click function (disable and enable)
(click)="idx != (mergeDocuments.length-1) && moveItemDown(idx);"

add multiple functions in click event
(click)="toggleEmailAttachmentRemoveStatus(doc); setFileNameExtension(doc)"

2. 
add class to html based on condition=
[class.hide-arrow] ="idx==(mergeDocuments.length-1)"  /*hide-arrow is html class*/

3. *ngfor get index and list length
<div *ngFor="let md of mergeDocuments; let idx = index">
/*idx will have value of current md index inside mergeDocuments*/
/*use mergeDocuments.length to get length of this list*/

4. <input [(ngModel)]="hello" (ngModelChange)="myFunction()"/>
/*everytime when ngModel has changes myFunction() will be triggered*/

5. 
"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
  "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
/*To avoid unexpected token export error for popper.js*/

6. make angular 5 works in IE

Go to your polyfills.ts and find the import statements commented out under the section:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
and all other comments related to IE

7. manipulate css in html

[style.display]="!cartItems?.length?'none':'inline'"
[ngStyle]="{'width': !setFullWindow? ((routeLast == 'product' || routeLast == 'productdetail') ? '100%': '55%'):(routeLast == 'product'? '140%':'65%'), 
height: (routeLast == 'productdetail')?'700px':''}

[ngStyle]="{'width.px': width}"

<div class="home-component" 
 [style.width.px]="width" 
 [style.height.%]="height">Some stuff in this div</div>

8. iterate array -- map

this.shoppingCart.cartItem.map((value, key) => {
  this.shoppingCart.itemNumber += value.quatity;
});

9. Another way to get input string

<input #searchInput class="searchInput" type="text" placeholder="SEARCH STOCK CODE IN CARTS" (keyup.enter)="searchProducts(searchInput.value)">
in component:
searchProducts(value:string):void{
  
}

10. bootstrap html attribute

[attr.data-target]="'#' + order?.orderNo"

11. use variable in string

`/myCarts/cartList/cart/${this.cartId}`

12. navigate to url with same prefix

this.router.navigate(['payment-method'], { relativeTo: this.activedRoute.parent });
<a [routerLink]="['product/'+ product.stock_code]">

13. manipulate child component css

:host /deep/ .completer-row {
    padding: 0px !important;
    margin-bottom: 0 !important;
}

14. lodash orderby

_.orderBy(this.shoppingCarts, ['isSelected', 'status'], ['desc', 'desc'])

15. Jquery reference in component

declare var jquery: any;
declare var $: any;

16. go back to last page

window.history.back();

17. create a object in angular

let pendingChange = {} as GetCSPSubscriptionActions;

18. import css in Angular css

@import "../add-subscription/add-subscription.component.css";

19. currency pipe

 | currency:'AUD':'symbol-narrow':'.2-2'
 
20. click outside to close ngbPopover

#p="ngbPopover" (document:click)="p.close()" (click)="$event.stopPropagation()"