在按钮单击 Angular 上切换 Div

在本节中，我们将学习如何通过单击按钮来切换 Div。我们将使用 Angular 来完成此操作。 在下面的示例中，我们将学习切换元素的使用。在我们的应用程序中，我们将使用 ngIf 和 hidden 来在按钮单击事件时切换 div。在我们的 Angular 应用程序中，我们可以使用 Angular 的各种版本，例如 Angular 6、7、8、9、10 和 11，来显示、使用和隐藏单击事件时切换的 div。

在本节中，我们将解释两个示例来学习单击时切换元素。在我们的第一个示例中，我们将把 if 与 *ngIf 一起使用。在第二个示例中，我们将把 if 与 [hidden] 一起使用。我们将使用两种方法来创建按钮。 当我们单击该函数时，它将被设置为 true，并且该变量将被设置为 false 值。 通过使用变量，我们的元素或 div 可以显示或隐藏。

示例 1

在我们的第一个示例中，我们将把 if 与 *ngIf 一起使用。

app.component.html

app.component.ts

示例 2

在第二个示例中，我们将把 if 与 [hidden] 一起使用。

app.component.html

app.component.ts

现在，我们上面的代码已准备就绪，我们可以在本地运行它。 当我们运行它时，将生成以下输出