[004] 앵귤러 (Angular) - Component with inline template

안녕하세요~ totally 개발자입니다.

 

Component with inline template

 

저번 글에서는 component with inline style에 관해 살펴보았고 이번에는 component with inline template에 대하여 알아보도록 하겠습니다. 이 부분은 template를 직접 지정하여 사용할 수 있도록 도와주는 역할을 하며 간단하게 사용할 수 있습니다.

 

ng generate component signup --inline-template으로 생성하기

위의 이미지대로 ng generate component signup --inline-template 커맨드를 터미널에 입력하여 inline-template를 가진 component를 생성해줍니다. 

 

signup.component.ts 파일

6-8번째에 html 태그를 입력하여 지정할 수 있습니다. 여기에 class 값도 추가하여 css를 적용할 수 있도록 해줍니다. 

 

signup.component.css 파일

signup.component.css 파일에 스타일을 적용해주고 저장해줍니다.

 

app.component.html 파일

app.component.html 파일에 2번째 줄처럼 <app-signup>를 추가하여 이제 이 컴포넌트를 적용하여 웹사이트로 확인해보도록 하겠습니다.

 

실행 모습

ng serve -o로 실행하였을 때 다음과 같이 나타나는 것을 확인하실 수 있습니다. component with inline style 및 component with inline template는 이와 같이 다른 파일이 아닌 같은 파일 내에 직접 적용하는 것이기 때문에 간단하게 적용할 수 있다는 장점이 있지만 코드가 길어지고 여러 스타일들을 사용하여야 하는 경우에는 inline보다는 styleUrls, templateUrl로 파일을 분리하여 적용하는 것을 권장드리지만 이렇게 inline으로도 적용할 수 있다는 점을 알고 계시면 좋을 것 같습니다. 감사합니다.