Hola a todos, hoy os voy a explicar como podemos instalar y utilizar el componente DDR Toast de la biblioteca DDR.
Aquí puedes ver la documentación del componente.
El componente ddr-block-list es un componente para mostrar notificaciones en diferentes estados.
Para instalar el componente, abre una terminal y escribe: npm i ddr-block-list
Después, debes agregar el módulo DdrblockListModule a tu app.module.ts
Para utilizarlo, debes hacer lo siguiente en el html, debemos tener en cuenta que podemos personalizar los campos que vamos a mostrar.
Tenemos 3 partes:
- templateInfoAdditional: Parte izquierda del bloque, se usa para mostrar un dato adicional, como una fecha.
- templateHeader: Parte superior del bloque, se usa como cabecera del bloque.
- templateData: Datos a mostrar como mini bloques, se usa el subcomponente ddr-block-data-item.
También podemos indicar los textos cuando no hay elementos, el elemento siguiente, el elemento previo y número de bloques.
Como eventos, tenemos los siguientes:
- actionSelected: devuelve la acción indicada.
- itemSelected: devuelve el item seleccionado.
Os dejo un ejemplo:
|
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 |
[blockItems]="blockItems" labelNoResults="No hay que mostrar" previousLabel="Previo" nextLabel="Siguiente" pagination="5" (actionSelected)="getAction($event)" (itemSelected)="selectItem($event)"> {{item.date | date: 'dd/MMM/yyyy'}} {{item.client}} label="Estado" [value]="item.status"> label="Edad" [value]="item.age"> |
En el typescript, debemos crear objetos DdrBlockItem, que contendrá los items que queremos utilizar. También las acciones a utilizar.
|
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
export class DdrBlockListDemo implements OnInit { public blockItems: DdrBlockItem[]; public CANCEL_APPOITMENT: string = "CANCEL_APPOITMENT" public BEFORE_APPOINTMENTS: string = "BEFORE_APPOINTMENTS" constructor() { this.blockItems = []; } ngOnInit() { let items = [ { "date": "2019-09-09", "status": "complete", "client": "Fernando", "age": 29 }, { "date": "2019-10-10", "status": "canceled", "client": "Pepe", "age": 17 }, { "date": "2019-09-09", "status": "in course", "client": "Manuel", "age": 80 }, { "date": "2019-12-12", "status": "unknown", "client": "Fernando", "age": 10 }, { "date": "2019-09-09", "status": "complete", "client": "Fernando", "age": 29 }, { "date": "2019-10-10", "status": "canceled", "client": "Pepe", "age": 17 }, { "date": "2019-09-09", "status": "in course", "client": "Manuel", "age": 80 }, { "date": "2019-12-12", "status": "unknown", "client": "Fernando", "age": 10 } ]; let actions: DdrAction[] = [ { 'label': "Cancelar cita", 'value': this.CANCEL_APPOITMENT }, { 'label': "Ver anteriores citas", "value": this.BEFORE_APPOINTMENTS, "icon": "fa fa-file" } ]; items.forEach(item => { let blockItem = new DdrBlockItem(); blockItem.item = item; switch (item.status) { case "complete": blockItem.borderColor = "green" break; case "canceled": blockItem.borderColor = "red" break; case "in course": blockItem.borderColor = "blue" break; case "unknown": blockItem.borderColor = "grey" break; } blockItem.actions = item.age >= 18 ? actions : actions.filter((act, index) => index === 0); this.blockItems.push(blockItem); }) } getAction($event) { console.log($event); } selectItem($event) { console.log($event); } } |
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