Mejoras en UX y reusabilidad

Clase 23 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Cristian Danilo Motta Herrera

student•

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'

Gabriel Oswaldo Montoya Huamani

student•

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.&#x20;

En nuestro atributo ngClass definimos las clases variables que vendran desde el padre a nuestro input btnStyles .&#x20;

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.&#x20;

Para implementarlo, quedaría de la siguiente manera:&#x20;

```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.&#x20;