Open In App

Angular MDBootstrap Screenreaders 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 attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Screenreaders Utilities in Angular MDBootstap. The Screenreaders Utilities can be used to hide all content except screen readers, by specifying the .sr-only class. This can also be used as mixins.

Syntax:

<div class="sr-only sr-only-focusable"> Content </div>

Approach:

  • Download Angular MDBootstrap from the official site.
  • Extract the files to the current 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
  • Start the server using the following command:
ng serve

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

Project Structure

Example: This is the basic example that illustrates how to use the Screenreaders Utilities in Angular MDBootstrap.

app.component.html




<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Screenreaders Utilities</h4>
    <br />
    <div class="sr-only sr-only-focusable">
        GeeksforGeeks
    </div>
</div>


app.component.ts




import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  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{}


Output:

Angular MDBootstrap Screenreaders Utilities

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



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