Angular 11 프로젝트 #03 - 배열 내용 뽑기

이제는 앵귤러에서 컴포넌트를 만들거야. 그리고 그 컴포넌트를 ㄴ딛ㅊㅅ를 사용해서 가져와볼거야

terminal : ng generate component 컴포넌트명 or ng g c 컴포넌트명

ex) ng g c greeting

이렇게 컴포넌트가 생성이 되고, 자동 생성이 된 파일 4개중 html 파일을 보면 자동으로 '컴포넌트이름' works! 라는 문구가 있다. 자 이제 이걸 웹사이트 상의 화면에 표현을 해보자

 

ng g c greeting 이라고 greeting component를 만들면 app.module.ts에 보면 자동적으로 들여와있다.

app.module에 등록이 된 것은 알겠고, 그렇다면 이 놈을 사용하려면 어떻게 해야될까? 바로 들어간다

greeting 폴더에 greeting.component.ts를 보면 selector이라고 되어있는 부분이 확인 가능할 것이다. 

greeting 폴더에 freeting.component.ts를 확인하면 

@Component 의 내용 중 selector: 로 설정이 된 부분을 볼 수 있다.우리는 selector가 말하는 'app-greeting'으로 이 녀석들 다른 곳에서 쓸 수 있다. 

아까 html 에 "greeting works!" 라는 문구가 입력이 되어있었다. 그 문구를 바로 출력을 시켜보자

 

 

 

 

 

 

 

 

 

app.component.html 의 가장 하단에 app-greeting 을 추가해보겠다 

<button (click)='clickAfterPrint()'>
  {{title}} → Title of Junmannn's Angular Page
</button>
<div *ngFor="let item of showArray">
  {{item}}
</div>

<h2>My favorite food is: {{myFoods}}</h2>
<p>Heroes:</p>
<ul>
  <li *ngFor="let a of foods">
    {{ a }}
  </li>
</ul>

<hr>
<app-greeting></app-greeting>

hr로 가로선을 하나 긋고 표현을 해보았다