Lập trình Angular - Structure Directive - ngIf và ngSwitch

NgIf và NgSwitch

1. NgIf:

Tag ng-template là một tag được cung cấp bởi Angular, nó sẽ lưu trữ một Template được định nghĩa bên trong cặp thẻ mở/đóng của nó. Những gì được định nghĩa bên trong đó sẽ không được hiển thị ra view, nhưng chúng ta có thể sử dụng Template đó để render bằng code.

• Syntax đơn giản:

      <div *ngIf="condition">Content to render when condition is true.</div>
          

• Syntax mở rộng:

      <ng-template [ngIf]="condition">
          <div>Content to render when condition is true.</div>
      </ng-template>
          

• Cấu trúc if-else

      <div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
      <ng-template #elseBlock>Content to render when condition is true.</ng-template>
              

• Cấu trúc if-then-else

      <div *ngIf="condition; then thenBlock else elseBlock"></div>
      <ng-template #thenBlock>Content to render when condition is true.</ng-template>
      <ng-template #elseBlock>Content to render when condition is false.</ng-template>
              

          Cách sử dụng:
              

      @Component({
          selector: 'ng-if-then-else',
          template: `
              <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
              <button (click)="switchPrimary()">Switch Primary</button>
              show = {{show}}
              <br>
              <div *ngIf="show; then thenBlock; else elseBlock">this is ignored</div>
              <ng-template #primaryBlock>Primary text to show</ng-template>
              <ng-template #secondaryBlock>Secondary text to show</ng-template>
              <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
          `
          })
      export class NgIfThenElse implements OnInit {
          thenBlock: TemplateRef<any>|null = null;
          show = true;
                    
          @ViewChild('primaryBlock', {static: true}) primaryBlock: TemplateRef<any>|null = null;
          @ViewChild('secondaryBlock', {static: true}) secondaryBlock: TemplateRef<any>|null = null;
                    
          switchPrimary() {
              this.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
          }
                    
          ngOnInit() {
              this.thenBlock = this.primaryBlock;
          }
      }
              

• Lưu trữ giá trị cục bộ:

      <div> *ngIf="condition as value; else elseBlock">{{value}}</div>
      <ng-template> #elseBlock>Content to render when value is null.</ng-template>
          

          Cách sử dụng:
          

  Bạn có thể muốn hiển thị một tập hợp các thuộc tính từ cùng một đối tượng. Nếu bạn đang đợi dữ liệu không đồng bộ, đối tượng có thể không được xác định. Trong trường hợp này, bạn có thể sử dụng ngIf và lưu trữ kết quả của điều kiện trong một biến cục bộ:

      @Component({
          selector: 'ng-if-as',
          template: `
              <button> (click)="nextUser()">Next User</button>
              <br>
              <div> *ngIf="userObservable | async as user; else loading">
                  Hello {{user.last}}, {{user.first}}!
              </div>
              <ng-template> #loading let-user>Waiting... (user is {{user|json}})</ng-template>
          `
      })
      export class NgIfAs {
          userObservable = new Subject<{first: string, last: string}>();
          first = ['John', 'Mike', 'Mary', 'Bob'];
          firstIndex = 0;
          last = ['Smith', 'Novotny', 'Angular'];
          lastIndex = 0;
                
          nextUser() {
              let first = this.first[this.firstIndex++];
              if (this.firstIndex >= this.first.length) this.firstIndex = 0;
              let last = this.last[this.lastIndex++];
              if (this.lastIndex >= this.last.length) this.lastIndex = 0;
              this.userObservable.next({first, last});
          }
      }
          

          Code này chỉ sử dụng 1 AsyncPipe, do đó chỉ 1 subscription được tạo.
      Câu lệnh điều kiện lưu kết quả của userStream | async trong biến user.
      Sau đó, bạn có thể bind biến user nhiều lần.
          Điều kiện chỉ hiển thị dữ liệu khi userStream return về 1 value, vì vậy bạn không cần sử dụng
      safe-navigation-operator (?.) để tránh giá trị null khi truy cập property.
      Bạn có thể hiển thị một template thay thế trong khi chờ dữ liệu.
          

2. NgSwitch:

• Cách 1:

      <div [ngSwitch]="hero?.emotion">
          <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
          <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
          <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
          <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
      </div>
          

• Cách 2: Hiếm dùng

      <div [ngSwitch]="hero?.emotion">
          <ng-template [ngSwitchCase]="'happy'">
              <app-happy-hero> [hero]="hero"></app-happy-hero>
          </ng-template>
          <ng-template [ngSwitchCase]="'sad'">
              <app-sad-hero> [hero]="hero"></app-sad-hero>
          </ng-template>
          <ng-template [ngSwitchCase]="'confused'">
              <app-confused-hero> [hero]="hero"></app-confused-hero>
          </ng-template >
          <ng-template ngSwitchDefault>
              <app-unknown-hero> [hero]="hero"></app-unknown-hero>
          </ng-template>
      </div>