Como instalar y utilizar DDR Detail de la biblioteca DDR

26/05/20210 comentarios

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.