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'
Gracias
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. 
Cristian Danilo Motta Herrera
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'
Seba Cardoso
Gracias
Patrick Feeney
Gracias
Gabriel Oswaldo Montoya Huamani
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.