Angular MDBootstrap Image Replacement 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 Image Replacement Utilities in Angular MDBootstrap.

An Image Replacement Utilities is used to swap an image in place of text using the image replacement class. The .text-hide class or mixin can be used to replace the text with the image.

Syntax:

<p style="background-image: url('link')">Content</p>

Approach:

• Download Angular MDBootstrap from the official site.
• 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

• 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 Image Replacement Utilities in Angular MDBootstrap.

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>
          Angular MDBootstrap Image Replacement Utilities
      </h4>
    <br />
    <h1 class="text-hide"
        style="background-image:url(
'https://media.geeksforgeeks.org/wp-content/uploads/20220125220442/download.png');
               width: 200px;
               height: 200px;">
            GeeksforGeeks
     </h1>
</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:

Reference: https://mdbootstrap.com/docs/angular/utilities/image-replacement/