What is Angular MDBootstrap Embeds Utilities?

In this article, we will learn Angular MDBootstrap Embeds Utilities,This free Bootstrap tutorial for complete beginners will help you learn Bootstrap from scratch.

Angular MDBootstrap Embeds Utilities - ❤️Bootstrap Tutorials In 2024

Q: How to use Angular MDBootstrap Embeds Utilities in Bootstrap?

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

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. It is free for both personal & commercial use. In this article, we will know how to use Embed Utilities in Angular MDBootstap. Embed Utilities are used to add different media to the elements.

Angular Bootstrap Embeds Utility allows you to integrate a video or slideshow into a page while maintaining the width of the parent and scaling on any device. The rules are directly applied to the <iframe>, <embed>, <video>, and <object> elements.

Syntax:

<div class="embed-responsive">
  <iframe class="embed-responsive-item" src="link"></iframe>
</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
or
npm install -y

After creating your project folder i.e. app name, 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:

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

app.component.html

<div id='gfg'> 
    <h2>w3wiki</h2> 
    <h4>Angular MDBootstrap Embed Utilities</h4> 
    <br /> 
    <div class="embed-responsive embed-responsive-16by9"> 
        <iframe class="embed-responsive-item" 
                src= 
"https://media.w3wiki.net/wp-content/uploads/20220125220442/download.png"> 
        </iframe> 
    </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{}

Output:

Example 2: This example illustrates the embedded videos to the page using the embed utility in Angular MDBootstrap.

app.component.html

<div id='gfg'> 
    <h2>w3wiki</h2> 
    <h4>Angular MDBootstrap Embed Utilities</h4> 
    <br /> 
    <div class="embed-responsive embed-responsive-16by9"> 
        <iframe width="1280" 
                height="720" 
                src= 
"https://www.youtube.com/embed/EQQp4B_CU5Q?list=PLqM7alHXFySEQDk2MDfbwEdjd2svVJH9p" 
                title="YouTube video player" 
                frameborder="0" 
                allow="accelerometer; 
                       autoplay;  
                       clipboard-write;  
                       encrypted-media;  
                       gyroscope;  
                       picture-in-picture" allowfullscreen> 
        </iframe> 
    </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:

Javascript

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