Angular MDBootstrap Visibility Utilities

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Visibility Utilities in Angular MDBootstrap. Visibility Utilities is used to show if the content is visible or not.

Syntax:

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

Approach:

• Download Angular MDBootstrap from: https://mdbootstrap.com/docs/angular/getting-started/installation
• Extract the files and change them to the working directory.
• Install npm in the current project using the following command

npm install

• After creating your project folder i.e. appname, move to it using the following command.

cd appname

• serve the project using the following command.

ng serve

Project Structure: After complete installation, it will look like the following:

Example 1: This is the basic example that illustrates how to use the Visibility Utilities.

app.component.html

<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>

app.component.ts

import { Component } from '@angular/core';

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

app.module.ts

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 { }

app.component.css

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

Output:

Reference: https://mdbootstrap.com/docs/angular/utilities/visibility/