Angular MDBootstrap Screenreaders Utilities

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/