No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Mejoras en UX y reusabilidad

23/24
Recursos

Aportes 2

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

en 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'

Otra forma de aplicar esta reusabilidad en el boton: button.component.ts: ```js 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.