HOHO - 240409 input output 연습

블로그 컴포넌트

1. ParentComponent: 이 컴포넌트는 블로그 제목을 표시하고 자식 컴포넌트에 해당 제목을 전달합니다.

   typescriptCopy code
   // parent.component.ts
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-parent',
     template: `
       <h1>{{ blogTitle }}</h1>
       <app-child [title]="blogTitle" (liked)="onLiked($event)"></app-child>
     `
   })
   export class ParentComponent {
     blogTitle = 'My Awesome Blog';
   
     onLiked(isLiked: boolean): void {
       if (isLiked) {
         console.log('User liked the blog!');
       } else {
         console.log('User unliked the blog!');
       }
     }
   }
   

2. ChildComponent: 이 컴포넌트는 부모로부터 전달된 블로그 제목을 표시하고 좋아요 버튼을 제공합니다.

   typescriptCopy code
   // child.component.ts
   import { Component, Input, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'app-child',
     template: `
       <h2>{{ title }}</h2>
       <button (click)="toggleLike()">Toggle Like</button>
     `
   })
   export class ChildComponent {
     @Input() title: string;
     @Output() liked: EventEmitter<boolean> = new EventEmitter<boolean>();
   
     isLiked = false;
   
     toggleLike(): void {
       this.isLiked = !this.isLiked;
       this.liked.emit(this.isLiked);
     }
   }
   

AppModule 등록

typescriptCopy code
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ParentComponent } from './parent.component';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

실행

위 코드를 포함하여 프로젝트를 설정한 후 ng serve 명령어를 사용하여 애플리케이션을 실행할 수 있습니다. 그러면 부모 컴포넌트에는 "My Awesome Blog"라는 블로그 제목과 좋아요 버튼이 표시되며, 버튼을 클릭하면 콘솔에 해당 이벤트가 기록됩니다.

이것은 간단한 블로그를 만들어 @Input 및 @Output 데코레이터를 연습하는 데 사용할 수 있는 예시입니다. 여기서는 제목을 부모로부터 전달받고 좋아요 상태를 부모에게 다시 전달하는 방식으로 데이터를 주고받았습니다.

앵귤러에서 @Input 및 @Output 데코레이터는 컴포넌트 간 데이터 통신을 용이하게 만들어줍니다. 여기서는 간단한 블로그 및 할 일 목록 (투두 리스트) 예시에 대해 설명하겠습니다.

1. 블로그 컴포넌트 예시:

블로그 컴포넌트 (부모 컴포넌트):

typescriptCopy code
import { Component } from '@angular/core';

@Component({
  selector: 'app-blog',
  template: `
    <app-post [title]="blogPost.title" [content]="blogPost.content" (postClicked)="onPostClicked($event)"></app-post>
  `
})
export class BlogComponent {
  blogPost = {
    title: 'Angular Components',
    content: 'Learn how to use Angular components efficiently.'
  };

  onPostClicked(data: any) {
    console.log('Post clicked:', data);
  }
}

포스트 컴포넌트 (자식 컴포넌트):

typescriptCopy code
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-post',
  template: `
    <div (click)="onClick()">{{ title }}</div>
    <div>{{ content }}</div>
  `
})
export class PostComponent {
  @Input() title: string;
  @Input() content: string;
  @Output() postClicked: EventEmitter<any> = new EventEmitter<any>();

  onClick() {
    this.postClicked.emit({ title: this.title, content: this.content });
  }
}

2. 할 일 목록 (투두 리스트) 예시:

할 일 목록 컴포넌트 (부모 컴포넌트):

typescriptCopy code
import { Component } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  template: `
    <app-todo-item *ngFor="let item of todoItems" [item]="item" (itemClicked)="onItemClicked($event)"></app-todo-item>
  `
})
export class TodoListComponent {
  todoItems = [
    { id: 1, task: 'Complete Angular tutorial', completed: false },
    { id: 2, task: 'Build a todo app', completed: false },
    { id: 3, task: 'Learn Angular animations', completed: false }
  ];

  onItemClicked(data: any) {
    console.log('Item clicked:', data);
  }
}

할 일 항목 컴포넌트 (자식 컴포넌트):

typescriptCopy code
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-todo-item',
  template: `
    <div (click)="onClick()">{{ item.task }}</div>
  `
})
export class TodoItemComponent {
  @Input() item: any;
  @Output() itemClicked: EventEmitter<any> = new EventEmitter<any>();

  onClick() {
    this.itemClicked.emit(this.item);
  }
}

이러한 예제에서는 @Input을 사용하여 부모에서 자식으로 데이터를 전달하고, @Output을 사용하여 자식에서 부모로 이벤트를 발생시킵니다. 이렇게 함으로써 컴포넌트 간의 효과적인 데이터 흐름을 달성할 수 있습니다.