How to hidden and show en element in Angular

Thủ thuật lập trình Angular xin chào các bạn, hôm nay mình sẽ giới thiệu cho các bạn về một vấn đề thường gặp trong lập trình angular, nếu ai đó thường sử điều kiện để thực hiện các dòng lệnh trong lập trình thì các bạn hãy đọc bài viết này để tham khảo, có thể sau này bạn gặp thì có thể vấn đề hidden and show en element này bạn dễ dàng xử lý một cách nhanh nhất sẽ không mất thời gian, nên vì thế các bạn đừng nên bỏ lỡ bài viết này.

Để sử dụng hidden and show div in angular bạn phải thực hiện một điều kiện gồm 2 trường hợp là hidden or visible vì thế để xác định yêu cầu của khách hàng bạn mới thực hiện nó.

Thực hiện điều kiện trong file app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
tienanhvn: boolean = true;
}

Trong đó :
tienanhvn là một kiểu dữ liệu boolean nếu nó chỉ nhận 2 giá trị true hoăc false.

File app.component.html

<p>Show </p>
<h1 [style.visibility]="(tienanhvn === false) ? 'hidden' : 'visible' ">Tienanhvn.blogspot.com</h1>
<p>Hidden </p>
<h1 [style.visibility]="(tienanhvn === true) ? 'hidden' : 'visible' ">Tienanhvn.blogspot.com</h1>

Nếu tienanhvn === false thì nó sẽ visible en element còn nếu tienanhvn === true thì nó sẽ hidden en element như kết quả trên.