如何通过 AngularJS 中的按钮单击隐藏 HTML 元素？

在本文中，我们将了解如何使用切换按钮功能在 Angular 中通过单击按钮来隐藏和显示元素。切换按钮是一种用户界面控件，当用户想要在两种状态或条件之间切换时，它可能很有用。例如，在我们的智能手机中，我们通常会关闭/打开蓝牙、Wifi、飞行模式等无线连接设备的按钮。这种切换按钮让日常生活中的事情变得更容易使用。本文将展示如何使用 Angular JS 制作切换数据按钮。

ngif 指令： ngIf 是一个 Angular 结构指令，它根据表达式求值的值创建模板。表达式的值应始终为True或False 。当模板内的表达式计算为真时，然后渲染then块内的代码块，而表达式计算为假，则渲染可选的else块。
句法：

Content to render when condition is true.

对于app.component.html文件，我们将使用这个 toggleData()函数来调用 Html 中的函数

Toggle Data

对于app.component.ts文件，我们定义了一个用于切换按钮以显示或隐藏内容的函数。

export class AppComponent {
 toDisplay = true;

 toggleData() {
   this.toDisplay = !this.toDisplay;
 }
}

方法：

• 首先，将内容包装在 Html 文件中的
  标记内。
• 现在获取一个变量“ toDisplay ”并将其绑定到
  标签。
• 在 HTML 文件中，包含一个按钮并在用户单击它时附加一个函数调用。
• 在 ts 文件中，实现该函数，现在在真假之间切换toDisplay变量。
• 上述实现完成后，启动应用程序

项目结构：这将如下图所示

例子：

app.component.html 

  
Click the below button to display and hide the data

Toggle Data

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  toDisplay = true;
  
  toggleData() {
    this.toDisplay = !this.toDisplay;
  }
}

输出：从上面的输出中，我们可以看到通过点击 Toggle Data 按钮，我们可以显示或隐藏数据。