목표 !! 앵귤러 인풋 아웃풋 이용해서 해보기!!

<@ input 데코레이터>

@Input()은 클래스 속성을 컴포넌트의 입력 속성으로 표시하는 Angular 데코레이터입니다.

이 데코레이터는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다.

-부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송할때 사용

-자식 컴포넌트에서 @input() 데코레이터를 통해서 데이터를 전송 받는다. 대문자로 시작함을 유의

-헤더에 타이틀이 바뀔때 @input()s데코레이터를 통해서 컴포넌트별로 타이틀값만 넣어주는 방식으로 구현할수도 있다.

다음은 @Input 데코레이터의 기본 사용 방법입니다:

typescriptCopy code
@Component({
  selector: "child",
  template: ` <p>{{ name }}</p> `,
})
export class ChildComponent {
  @Input() name: string;
}

여기서 @Input() 데코레이터는 name 속성을 입력 속성으로 표시하도록 했습니다.

이는 부모 컴포넌트가 ChildComponent를 사용하여 속성 템플릿 바인딩 구문을 사용하여 name 속성의 값을 설정할 수 있음을 의미합니다:

typescriptCopy code
@Component({
  selector: "parent",
  template: ` <child [name]="name" /> `,
})
export class ParentComponent {
  name = "John Doe";
}

name 속성의 값이 부모 컴포넌트에서 변경되면, 이 변경 사항은 @Input() 데코레이터를 통해 전파됩니다.

**// app-child-component.ts**

import {Input} from '@angular/core';

export class ChildComponent implements OnInit {

    //부모로 부터 데이터를 받을 변수 이름
    @Input() data:any
}

**// app-parent-component.html**

// 자식 컴포넌트에 있는 data 변수에
// 부모 컴포넌트의 parentData데이터를 넣어준다.
<app-child [data]= "parentData"></app-child>

// app-parent-component.ts
export class ChildComponent implements OnInit {

    parentData = "insertData";
}

// app-child-component.html
<span>{{data}}</span> //출력결과는 insertData{{}}는 Angular에서 Html상에서 변수를 사용하고싶을때 {{}}안에 변수명을 입력하면된다.@Output

>> 입력을 필수로 표시 할때!!

@Component({
  selector: "app-child",
  template: ` <p>{{ name }}</p> `,
})
export class ChildComponent {
  @Input({
    required: true,
  })
  name: string;
}

위 코드에서 name 속성은 필수로 지정되었으며, 이는 부모 컴포넌트가 name 속성에 값을 제공해야 함을 의미합니다.

입력 속성에 값이 제공되지 않으면 다음과 같은 오류가 발생합니다:

[ERROR] NG8008: Required input 'name' from component ChildComponent must be specified.

>> @input의 set와 get

---