Open In App

Angular MDBootstrap Visibility Utilities

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 15 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads