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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
detail-title>Detalle ejemploclass="row" detail-content> class="col-12"> class="row form-group"> class="col-12"> type="text" class="form-control" id="field1"> class="row form-group"> class="col-12"> type="text" class="form-control" id="field2"> class="row form-group"> class="col-12"> type="text" class="form-control" id="field3"> class="row form-group"> class="col-12"> |
En el typescript, pondremos lo siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.
[ufwp id=»2167310″]Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta