Criando uma To-Do List em Angular 17

Angular é um framework de desenvolvimento front-end baseado em TypeScript, mantido pelo Google, utilizado para a criação de aplicações web dinâmicas e single-page. Ele oferece uma estrutura robusta e modular para construir interfaces de usuário interativas, facilitando a manipulação do DOM, o gerenciamento de estado da aplicação e a comunicação com servidores.

Vamos começar a nossa aplicação utilizando a versão mais recente do Angular. Aplicação como esta que vamos criar, é um bom ponto de partida para quem está iniciando com Angular e quer aprender mais sobre suas funcionalidades e escopo.

Você precisa do Node.JS e NPM, vamos presumir que você já esteja com essas duas tecnologias devidamente instaladas em seu computador de desenvolvimento.

Abra um novo terminal e instale o Angular globalmente.

npm install -g @angular/cli

Agora dentro de uma pasta na qual vai conter a sua aplicação, rode o comando abaixo para criar um novo projeto em Angular.

ng new projeto-todo-list

Vamos utilizar o Bootstrap para estilizar o nosso componente, para isso, faça a instalação utilizando o comando abaixo.

ng add @ng-bootstrap/ng-bootstrap

Até aqui você tem o seu projeto criado, vamos agora criar o seu primeiro componente, para isso rode o comando abaixo no terminal, dentro da pasta raiz do seu projeto.

ng g c todo

Vamos entender o comando acima.

• ng - Todo comando Angular inicia-se com esse prefixo;
• g - Seria abreviação para generate;
• c  - Seria abreviação para component;
• todo - Nome do seu componente.

Agora dentro da pasta src/app você vai ver uma nova pasta com o nome do seu projeto. Dentro dela há alguns arquivos, sendo eles:

• todo.component.css - Arquivo contendo todo o estilo CSS do seu componente;
• todo.component.html - HTML do seu componente;
• todo.component.spec.ts - Arquivo para execução de testes;
• todo.component.ts - Arquivo Typescript contendo suas regras Javascript.

Criando a regra de negócio com o Typescript

Vamos começar criando a nossa regra de negócio, para isso, copie e cole o código abaixo no seu arquivo todo.component.ts.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-todo',
  standalone: true,
  imports: [FormsModule, CommonModule],
  templateUrl: './todo.component.html',
  styleUrl: './todo.component.css'
})

export class TodoComponent {
  items: { id: number, name: string, done: boolean }[] = [];
  id: number = 1;
  taskInput: string = '';

  addItem = () => {
    this.items.push({
      id: this.id,
      name: this.taskInput,
      done: false
    })

    this.taskInput = ''

    this.id++
  }

  getItems(done: boolean) {
    return this.items.filter(item => item.done === done);
  }

  setDone = (id: number) => {
    const index = this.items.findIndex(item => item.id === id);


    if (index !== -1) {
      const currentState = this.items[index].done;

      this.items[index].done = !currentState;
    }
  }
}

Observe que nas primeiras linhas a gente importa o FormsModule e o CommonModule, ambas as bibliotecas vão nos auxiliar na manipulação dos controles e inputs.

Observe na anotação decorada @Component que a gente informa o caminho do nosso CSS e HTML. Também importamos as bibliotecas citadas acima, por último, note que temos o selector, é através dele que vamos utilizar o nosso componente a seguir.

Por fim, temos a nossa classe com a regra do nosso componente.

Montando o formulário HTML do nosso componente

Abra o arquivo todo.component.html e cole o código abaixo.

<div class="container">
    <h1>To do list</h1>
    <div class="form-inline">
        <input type="text" class="form-control" placeholder="Insira a tarefa aqui" [(ngModel)]="taskInput">
        <button class="btn btn-primary" (click)="addItem()">Adicionar</button>
    </div>
    <hr>

    <div>
        <h3>Non Done</h3>
        <ul class="list">
            <li *ngFor="let item of getItems(false)">
                <label for="checkbox-{{item.id}}" class="form-check-label">
                    <input id="checkbox-{{item.id}}" class="form-check-input"
                    type="checkbox" value="{{item.done}}" [checked]="item.done"
                        (click)="setDone(item.id)" />
                    {{item.name}}
                </label>
            </li>
        </ul>
    </div>

    <div>
        <h3>Done</h3>
        <ul class="list">
            <li *ngFor="let item of getItems(true)">
                <label for="checkbox-{{item.id}}" class="form-check-label">
                    <input id="checkbox-{{item.id}}" class="form-check-input"
                    type="checkbox" value="{{item.done}}" [checked]="item.done"
                        (click)="setDone(item.id)" />
                    {{item.name}}
                </label>
            </li>
        </ul>
    </div>
</div>

Estilizando o CSS do nosso componente

Por fim, vamos estilizar o nosso componente, para isso, cole o código abaixo no arquivo todo.component.css.

.container {
    max-width: 500px;
    width: 100%;
    padding: 10px;
    background-color: rgb(52, 58, 63);
}

h1 , h2, h3{
    color: #fff;
}

.form-inline {
    display: flex;
    gap: 10px;
}

.list {
    padding: 0;
    list-style: none;
}

.list li {
    color: #fff;
    display: flex;
}

Finalizando e rodando o nosso componente

Abra o arquivo app/app.component.html e chame o nosso componente dentro dele, conforme mostra o código a seguir.

<app-todo></app-todo>

Por fim, devemos importar o nosso componente, para isso, abra o arquivo app.component.ts.

import { TodoComponent } from "./todo/todo.component";

@Component({
    imports: [..., TodoComponent]
})

Agora basta rodar o comando abaixo para iniciar o servidor e rodar a sua aplicação To-Do List em Angular.

ng serve