Mejoras en UX y reusabilidad
Contenido del curso
Maquetando con Tailwind
Componentes interactivos con Angular CDK
Drag and drop
Modales y listas
Table CDK
Próximos pasos para completar el Clon de Trello
Mejoras en UX y reusabilidad
Contenido del curso
Mejoras en UX y reusabilidad
Cristian Danilo Motta Herrera
Estudiante
Patrick Feeney
Estudiante
Gabriel Oswaldo Montoya Huamani
Estudianteen el minuto 11:30 genera la variable mapColors, y le da tipado a el Input Color, yo lo que hago en estos casos es tiparlo así, me parece que hace mas facil el mantenimiento
mapColors= { success:{}, primary:{}, } @Input() color:keyof typeof this.mapColors= 'success'
Gracias
Otra forma de aplicar esta reusabilidad en el boton:
button.component.ts:
import { Component, Input, OnInit } from '@angular/core'; type typeBtn = 'submit' | 'button' | 'reset'; type moodBtn = 'dangerous' | 'main' |'disabled' | 'custom'; @Component({ selector: 'app-button', templateUrl: './button.component.html', }) export class ButtonComponent implements OnInit{ @Input() btnStyles!: string; // typeButton para saber que tipo de boton es @Input() typeButton: typeBtn = 'button'; // moodButton es un input para saber que estilos debemos agregar a nuestro boton, usamos los type para tener un buen tipado. @Input() moodButton: moodBtn = 'main'; // isDisabled para cuando el boton tiene el mood "disabled". public isDisabled!: boolean; ngOnInit(): void { this.moodButton == 'disabled' ? this.isDisabled = true : this.isDisabled = false; } get customStyle(): string{ if(this.moodButton == 'dangerous'){ return `bg-red-500 cursor-not-allowed ${this.btnStyles}`; } if(this.moodButton == 'disabled'){ return `bg-slate-500 cursor-not-allowed ${this.btnStyles}`; } if(this.moodButton == 'main'){ return `bg-primary ${this.btnStyles}`; } return `${this.btnStyles}`; } } ```button.component.html ```js <button class="w-full text-center text-white font-medium rounded-md" [disabled]="this.isDisabled" [ngClass]="this.customStyle" [type]="this.typeButton"> <ng-content></ng-content> </button> ```En nuestro atributo class, definimos las clases que van a hacer constantes, es decir, clases que el boton debe tener por defecto.  En nuestro atributo ngClass definimos las clases variables que vendran desde el padre a nuestro input btnStyles .  Ademas agregue estilos por defecto cuando el moodButton es 'dangerous', 'main', 'disabled' o 'custom'. Cuando es custom no agrega estos estilos por defecto y agarra los estilos del input.  Para implementarlo, quedaría de la siguiente manera:  ```js <app-button typeButton="submit" moodButton="main" btnStyles="py-2"> Continuar </app-button> ```De esta forma, podemos reusar este boton en cualquier parte de nuestra aplicación.