Como instalar y utilizar DDR Detail de la biblioteca DDR

Hola a todos, hoy os voy a explicar como podemos instalar y utilizar el componente DDR Detail de la biblioteca DDR.

Aquí puedes ver la documentación del componente.

El componente ddr-detail es un componente para mostrar un detalle con un contenido personalizable.

Para instalar el componente, abre una terminal y escribe: npm i ddr-detail

Después, debes agregar el módulo DdrDetailModule a tu app.module.ts

Este componente, podemos personalizar el contenido del mismo, es decir, podemos meter HTML dentro de la etiqueta como si fuera contenido anidado.

Tenemos dos directivas que podemos usar:

  • detail-title: hace referencia al bloque del titulo del detalle.
  • detail-content: hace referencia al bloque del contenido del detalle.

Como eventos, tenemos uno que se llama close que se usa cuando cerramos el detalle.

Os dejo un ejemplo completo:

<button class="btn btn-primary" (click)="openDetail()">Abrir detalle</button>

<ddr-detail *ngIf="showDetail" (close)="closeDetail()">

  <h1 detail-title>Detalle ejemplo</h1>

  <div class="row" detail-content>
    <div class="col-12">
      <form>

        <div class="row form-group">
          <div class="col-12">
            <label for="field1">Campo 1</label>
            <input type="text" class="form-control" id="field1">
          </div>
        </div>

        <div class="row form-group">
          <div class="col-12">
            <label for="field2">Campo 2</label>
            <input type="text" class="form-control" id="field2">
          </div>
        </div>

        <div class="row form-group">
          <div class="col-12">
            <label for="field3">Campo 3</label>
            <input type="text" class="form-control" id="field3">
          </div>
        </div>

        <div class="row form-group">
          <div class="col-12">
            <button class="btn btn-block btn-primary" type="button">Guardar</button>
          </div>
        </div>



      </form>
    </div>
  </div>

</ddr-detail>



En el typescript, pondremos lo siguiente:


export class DdrDetailDemo {

  public showDetail: boolean;

  constructor() {
    this.showDetail = false;
  }

  openDetail() {
    this.showDetail = true;
  }

  closeDetail() {
    this.showDetail = false;
  }

}

Te dejo un ejemplo en vivo:

Recuerda que si quieres aprender a como realizar la tuya, lo puedes ver en nuestro curso de angular de Crea tu propia biblioteca de componente con Angular.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *