Mejoras en UX y reusabilidad

Componentes interactivos con Angular CDK

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;

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;

Mejoras en UX y reusabilidad

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular