[Angular] 프로젝트 시작, props, emit

- 프로젝트 생성

ng new my-first-project

 

- component 생성

ng g c test

 

- for문

<tr *ngFor="let todo of todos;let i = index;">
   <th>{{i+1}}</th>
   <td class="{{(todo.isCompleted)?'done':''}}" (click)="done(i)">{{todo.name}}</td>
   <td (click)="remove(i)">X</td>
</tr>

 

- props

[부모.components.html]

<app-counter [count]="total"></app-counter>

[자식.componen.ts]

export class CounterComponent implements OnInit {
  @Input() count: number;
  
  constructor() { }
  ngOnInit(): void {}
}

 

-emit

[자식.component.ts]

export class CounterComponent implements OnInit {
  @Output() test = new EventEmitter<string>();
  check = 'emit'

  handleClick(state:string) {
    this.test.emit(state)
  }

  constructor() { }
  ngOnInit(): void {
  }
}

[자식.component.html]

<button (click)="handleClick(check)">click</button>

[부모.components.html]

<app-counter (test)="eventHandler($event)"></app-counter>

[부모.components.ts]

eventHandler(state: string) {
    this.check = state
}