MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. Es gratis para uso personal y comercial. En este artículo, sabremos cómo usar Embed Utilities en Angular MDBootstap. Las utilidades de inserción se utilizan para agregar diferentes medios a los elementos.
La utilidad Angular Bootstrap Embeds le permite integrar un video o presentación de diapositivas en una página mientras mantiene el ancho del padre y escala en cualquier dispositivo. Las reglas se aplican directamente a los elementos <iframe>, <embed>, <video> y <object>.
Sintaxis:
<div class="embed-responsive"> <iframe class="embed-responsive-item" src="link"></iframe> </div>
Acercarse:
- Descarga Angular MDBootstrap desde el sitio oficial .
- Extraiga los archivos al directorio de trabajo actual.
- Instale npm en el proyecto actual usando el siguiente comando:
npm install or npm install -y
- Después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando:
cd appname
- Inicie el servidor con el siguiente comando:
ng serve
Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:
Ejemplo 1: este es el ejemplo básico que ilustra cómo usar las utilidades integradas en Angular MDBootstrap.
app.component.html
<div id='gfg'> <h2>GeeksforGeeks</h2> <h4>Angular MDBootstrap Embed Utilities</h4> <br /> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src= "https://media.geeksforgeeks.org/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{}
Producción:
Ejemplo 2: este ejemplo ilustra los videos incrustados en la página mediante la utilidad de inserción en Angular MDBootstrap.
app.component.html
<div id='gfg'> <h2>GeeksforGeeks</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{}
- aplicación.módulo.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{}
Producción:
Referencia: https://mdbootstrap.com/docs/angular/utilities/embeds/