Skip to main content

Directive

Commom (11)​

class style bind​

<!-- Native Class and Style Attributes -->
<input class="is-danger my-button" style="border: none; color: blue" />

<!-- Angular class and style Bindings -->
<input [class.is-danger]="booleanProp" [style.border]="borderProp" />

<!-- ngClass -->
<input [ngClass]="{'is-danger': booleanProp, 'myButton': true}" />
<input [ngClass]="isDangerButton" />

<!-- ngStyle -->
<input [ngStyle]="{'border': borderProp, 'color': colorProp}" />
<input [ngStyle]="hasColorBorder" />

精通 Angular 之 NgClass 和 NgStyle

angularJs 中关于 ng-class 的三种使用方式说明

Angular - Attribute 繫結、類別繫結和樣式繫結

ngFor​

*ngFor="
  let item of items;
  let idx = index;
  let first = first;
  let last = last;
  let even = even;
  let odd = odd"

使用 NgFor 時，我們可以同時搭配使用五個不同的變數，分別是：

  • index：整數值；代表目前資料在陣列中的 index
  • first：布林值；代表目前資料是否為 第一筆
  • last：布林值；代表目前資料是否為 最後一筆
  • even：布林值；代表目前資料的 index 是否為 第偶數筆
  • odd：布林值；代表目前資料的 index 是否為 第奇數筆

全端開發人員天梯

Performance Optimization - ngFor trackBy​

在更新 list 的時候，會去比對 render 出來的 list ，如果已經有的東西，就不會重新 render

提升 render 效能的方法

參考文章

ngIf​

ngIf 會直接看 DOM 不見，而 [hidden] 的這個寫法只會讓 dom 看不見

<div *ngIf="false">test</div>
<div [hidden]="true">
    <!- [style.display]="!isLoading ? 'block' : 'none'" ->
</div>

ngIf else 的 組合技

<div *ngIf="display; else anotherWord">Hello</div>
<ng-template #anotherWord>
    <div>World</div>
</ng-template>
<button (click)="display = !display">Toggle Display</button>

ngModel​

一定要引用 import { FormsModule } from '@angular/forms'; > imports: [FormsModule] 不然會沒有辦法使用

小技巧：可以記得是個口訣「盒子裡的香蕉」，因為 [()] 就像是盒子中有香蕉

有三種寫法都可以達到雙向綁定的效果

綁定方法 1​

使用 [()] 的寫法

<input [(ngModel)]="username" />

<p>Hello {{username}}!</p>

綁定方法 2​

將 [] () 分開寫

<input [ngModel]="username" (ngModelChange)="username = $event" />

<p>Hello {{username}}!</p>

綁定方法 3​

不使用 ngModel

<input [value]="username" (input)="username = $event.target.value" />

<p>Hello {{username}}!</p>

ngMode 底層說明 l

[Angular 深入淺出三十天] Day 09 - Angular 小學堂（二） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

NgTemplateOutLet​

參考文章

NgPlural​

NgPluraCase​

<some-element [ngPlural]="value">
    <ng-template ngPluralCase="=0">there is nothing</ng-template>
    <ng-template ngPluralCase="=1">there is one</ng-template>
    <ng-template ngPluralCase="few">there are a few</ng-template>
</some-element>

NgSwitch​

NgSwitchCase​

NgSwitchDefault​

// homepage.component.html

<ng-container *ngFor="let link of links">
    <div [ngSwitch]="link?.name">
        <div *ngSwitchCase="'HOME'" style="color: blue">{{link?.name}}</div>
        <div *ngSwitchCase="'ABOUT US'" style="color:red">{{link?.name}}</div>
        <div *ngSwitchCase="'Students'" style="color: green">{{link?.name}}</div>
        <div *ngSwitchCase="'Teachers'" style="color:violet">{{link?.name}}</div>
        <div *ngSwitchDefault>output2</div>
    </div>
</ng-container>

NgTemplateOutlet​

如果您在使用 ngTemplateOutlet 時收到 Type 'TemplateRef<any>' is not assignable to type 'NgIterable<any>' 的錯誤，通常是因為 ngTemplateOutlet 被誤用。正確的使用方式是將 ngTemplateOutlet 與 ngTemplateOutletContext 一起使用。

請確保您在使用 ngTemplateOutlet 時遵循以下模板結構：

<ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="contextObj"></ng-container>

在這個結構中，templateRef 是一個 TemplateRef<any> 類型的變數，而 contextObj 是一個包含上下文數據的對象。

請檢查以下幾點，以確保正確使用 ngTemplateOutlet：

  1. 確保 templateRef 是來自於 <ng-template> 的參考，而不是其他的變數或方法。
  2. 確保 contextObj 是一個對象，其中包含了您想傳遞給模板的上下文數據。

如果您的模板結構和使用方法都符合上述指南，但仍然收到錯誤，請檢查其他可能的錯誤，例如變量命名錯誤、遺漏必需的模塊導入等。

https://ithelp.ithome.com.tw/articles/10205829

https://angular.io/api/common/NgTemplateOutlet

Forms (27)​

Router (4)​

參考 router page

angular api

upgrade/static (1)​

customer directive​

建立一個客制化的 directive

$ ng g directive [NEW_DIRECTIVE]

下列是一個監聽 input event 來改變數值寫法

import { Directive, ElementRef, HostListener, Input } from "@angular/core";
import { NgControl } from "@angular/forms";

@Directive({ selector: "[appOnlyNumber]" })
export class OnlyNumberDirective {
    @Input() includeFloat: boolean = false;
    @Input() floatLength: number = -1;
    constructor(private el: ElementRef, private control: NgControl) {}

    private run() {
        let element = this.el.nativeElement as HTMLInputElement;
        let re = this.includeFloat ? /[^\d.]/g : /[^\d]/g;
        const overTwoDots = element.value.split("").filter((item) => item === ".").length > 1;
        if (overTwoDots) {
            const newValue = element.value.split("").slice(0, -1).join("");
            this.control.control.setValue(newValue);
            return;
        }
        const newValue = element.value.replace(re, "");
        this.control.control.setValue(newValue);
    }

    @HostListener("input", ["$event"])
    onInput() {
        this.run();
    }

    ngOnDestroy(): void {
        window.removeEventListener("input", this.onInput.bind(this));
    }
}

Other​

how to add image in assets in angular​

<img [src]="imageSrc" [alt]="imageAlt" />

<img src="{{imageSrc}}" alt="{{imageAlt}}" />
export class sample Component implements OnInit {
   imageSrc = 'assets/images/iphone.png'
   imageAlt = 'iPhone'
}