HOHO - 240403 복습

<div>
  <input type="text" placeholder="입력하시오" [(ngModel)]="inputValue" />
  <button (click)="addtodo()">추가</button>
</div>
@for (todo of todos; track todo.id) {
<ul>
  <li>
    {{ todo.id }}
    <button (click)="remove(todo)">삭제</button>
  </li>
</ul>
}

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

type Input = {
  id: number;
  name: string;
};

@Component({
  selector: 'app-newchan',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './newchan.component.html',
  styleUrl: './newchan.component.scss',
})
export class NewchanComponent {
  inputValue: string = '';
  todos: Input[] = [
    {
      id: 1,
      name: this.inputValue,
    },
  ];
  addtodo() {
    const lastitem = this.todos[this.todos.length - 1].id;
    const newInput = {
      id: lastitem + 1,
      name: this.inputValue,
    };
    this.todos.push(newInput);
    this.inputValue = '';
  }

  remove(todos: Input) {
    this.todos = this.todos.filter((item) => item.id !== todos.id);
  }
}

삭제 버튼 추가 버튼

내일 복사 요소는- 삭제 + 추가 + 아이디찾기 + 체크박스 해서 ngclass로 해서 바뀌게 기능!!