Angular MDBootstrap嵌入实用程序

MDBootstrap是一个基于Material Design和bootstrap的Angular UI库，以其无缝和易于使用的组件来制作有吸引力的网页。它对个人和商业使用都是免费的。在这篇文章中，我们将了解如何在Angular MDBootstap中使用嵌入工具。嵌入工具是用来添加不同的媒体到元素中的。

Angular Bootstrap Embeds Utility允许你将视频或幻灯片集成到一个页面中，同时保持父体的宽度并在任何设备上进行缩放。这些规则直接应用于<iframe>、<embed>、<video>、和<object>元素。

语法:

<div class="embed-responsive">
  <iframe class="embed-responsive-item" src="link"></iframe>
</div>

步骤:

从官方网站下载Angular MDBootstrap。
将文件提取到当前工作目录。
使用以下命令在当前项目中安装npm。

npm install
or
npm install -y

在创建你的项目文件夹即应用程序名称后，使用以下命令移动到它。

cd appname

使用以下命令启动服务器。

ng serve

项目结构：完成安装后，它将看起来像下面这样。

Angular MDBootstrap嵌入实用程序

例子1：这是一个基本的例子，说明了如何在Angular MDBootstrap中使用嵌入工具。

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

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

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{}

输出:

Angular MDBootstrap嵌入实用程序

例子2：这个例子说明了使用Angular MDBootstrap的嵌入工具将视频嵌入到页面。

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

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{}

输出:

Angular MDBootstrap嵌入实用程序