Componente de colapso de Angular MDBootstrap

MDBootstrap En este artículo, sabremos cómo usar Collapse Component en Angular MDBootstrap.

El componente colapsar indica un elemento colapsable, es decir, el contenido que se mostrará u ocultará con un clic de un botón.

Sintaxis:

<button mdbBtn (click)="gfg.toggle()" mdbWavesEffect>
   Click here
</button>
<div mdbCollapse #gfg="bs-collapse">
      <p>Content</p>
</div>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos y cámbielos al directorio de trabajo.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

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

Estructura del proyecto

Ejemplo 1: este es el ejemplo básico que ilustra cómo usar el componente Collapse en Angular MDBootstrap.

<div id='gfg'>
    <h1>GeeksforGeeks</h1>
    <h4>Angular MDBootstrap Collapse Component</h4>
    <br />
    <div>
        <button mdbBtn color="primary" 
                class="waves-light" 
                type="button" 
                (click)="gfg.toggle()" mdbWavesEffect>
            Click Here To Toggle! 
        </button>
        <div mdbCollapse #gfg="bs-collapse">
            <p> 
                MDBootstrap is a bootstrap-based angular UI 
                library that is used to make good looking<br/> 
                webpages with its seamless and 
                easy-to-use component. 
            </p>
        </div>
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  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:

 

Ejemplo 2: en este ejemplo, colapsamos el texto en el ciclo de vida ngAfterViewInit en Angular MDBootstrap.

<div id="gfg">
    <h1>GeeksforGeeks</h1>
    <h4>
        Angular MDBootstrap Collapse Component
    </h4>
    <br />
    <button mdbBtn color="success"
            type="button" 
            (click)="test.toggle(); togglebg()" mdbWavesEffect>
        Click Here To Toggle 
    </button>
    <div mdbCollapse [isCollapsed]="true" 
         #test="bs-collapse">
        <p *ngIf="togglevisible">
            MDBootstrap is a bootstrap-based angular
            UI library that is used to make good looking<br /> 
            webpages with its seamless and easy-to-use component.
        </p>
    </div>
</div>

import { AfterViewInit, Component, ViewChildren } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent implements AfterViewInit {
  @ViewChildren(AppComponent) collapses!: AppComponent[];
  
  ngAfterViewInit(): void {}
  togglevisible = false;
  
  togglebg() {
    this.togglevisible = !this.togglevisible;
  }
}

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { CollapseModule, MDBBootstrapModule }
    from "angular-bootstrap-md";
import { FormsModule } from "@angular/forms";
  
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
    CollapseModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

#gfg{
    margin: 40px
}
.a{
    border-radius: 5px;
    border: 2px solid black;
    padding: 10px;
}

Producción:

 

Referencia: https://mdbootstrap.com/docs/angular/advanced/collapse/