Angular MDBootstrap可见性实用程序

MDBootstrap是一个基于Material Design和bootstrap的Angular UI库，通过其无缝和易于使用的组件来制作好看的网页。在这篇文章中，我们将了解如何在Angular MDBootstrap中使用Visibility Utilities。Visibility Utilities是用来显示内容是否可见的。

语法:

<p className="visible">GeeksforGeeks</p>

步骤:

• 下载 Angular MDBootstrap from: https://mdbootstrap.com/docs/angular/getting-started/installation
• 提取文件并把它们改到工作目录。
• 使用以下命令在当前项目中安装npm

npm install

• 在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

• 使用以下命令为该项目服务。

ng serve

项目结构：完成安装后，它将看起来像下面这样。

例子1：这是一个基本的例子，说明了如何使用可见性实用程序。

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Visibility Utilities</h4>
    <br />
    <h3 class='visible' className="visible">
        The content is visible
    </h3>
    <div class='invisible' className="invisible">
        The content is invisible
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
  
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MDBBootstrapModule.forRoot(),
        FormsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

#gfg{
    margin: 20px;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}

输出: