Crear una nueva card: UI

Clase 15 de 22 • Curso Práctico de Angular: Construye un Clon de Trello

Contenido del curso

Introducción

Integración entre UI y API

Drag and Drop

Boards

Cards

Listas

Backgrounds

Próximos pasos

22
¿Quieres más cursos de Angular?
05:26 min

Tomar examen

Comentarios

José Nicolás Aristizabal Ramírez

student•

una forma de lograr el mismo funcionamiento, pero con menos lineas de código sería la siguiente:

 openFormCard(list: List) {
    if (this.boardDetail?.lists) {
      this.boardDetail.lists = this.boardDetail?.lists.map((listD) => ({
        ...listD,
        showCardForm: listD.id === list.id,
      }));
    }
  }

David Fernando Rodriguez Delgado

student•

Bonita ejecución

Adrian Silva

student•

A mi me funcionó así:

openFormCard(listSel: List){
    if(this.board?.lists){
      this.board.lists.map(list => {
        list.id === listSel.id ? list.showForm = true : list.showForm = false;
      })
    }
  }

David Higuera

student•

Alternativa:

HTML

<div class="mt-5">
  <app-btn
    *ngIf="activeFormList !== list.id"
    (click)="activeFormList = list.id"
    color="light"
    >Add Board</app-btn
  >
  <div *ngIf="activeFormList === list.id">active form</div>
</div>

activeFormList: List['id'] = '';

Crear una nueva card: UI

Introducción

Bienvenida y setup del proyecto

Funcionamiento de la API y análisis del proyecto

Integración entre UI y API

Conectando los boards del usuario

Creando el card color component

Typing Colors

Detalle de un board

Drag and Drop

Algoritmo para detectar la posición de la card

Detectar tipo de movimiento: drag and drop

Calcular la posición

Actualizar una sola card

Actualizar lista

Boards

Crear un nuevo board: UI

Crear un nuevo board: conectar con la API

Cerrar el overlay

Cards

Crear una nueva card: UI

Crear una nueva card: formulario

Crear una nueva card: conectar con la API

Listas

Crear una nueva lista: UI

Crear una nueva list: conectar con la API

Backgrounds

Background dinámico

Estado para el Background

Próximos pasos

¿Quieres más cursos de Angular?