Contenido de figuras angulares de MDBootstrap

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 el contenido de figuras en Angular MDBootstap. Contenido de figuras se utiliza para añadir figuras en un elemento.

Las cifras de MDBootstrap se utilizan para mostrar imágenes con el título. Un título se puede alinear a la izquierda o a la derecha; de forma predeterminada, se alinea a la izquierda. Asegúrese de haber agregado la clase ‘img-fluid’ a su etiqueta <img> para que su imagen responda.

Sintaxis:

<figure class="figure">
    <img src="link">
        <figcaption class="figure-caption">
            GeeksforGeeks
        </figcaption>
</figure>

Acercarse:

• Descargue Angular MDBootstrap desde: https://mdbootstrap.com/docs/angular/getting-started/installation/
• Extraiga los archivos y cambie al directorio de trabajo.
• 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 el contenido de las figuras.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Figures Content</h4>
    <br />
    <figure class="figure">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
            class="figure-img img-fluid z-depth-1" 
            style="width: 400px">
        <figcaption class="figure-caption">
            GeeksforGeeks
        </figcaption>
    </figure>
</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 { }

Producción:

Referencia: https://mdbootstrap.com/docs/angular/content/figures/