(6) 컴포넌트 템플릿, 스타일, 셀렉터 수정하기

이번시간에는 컴포넌트 템플릿, 스타일을 수정해보도록 하겠습니다.

 

products.component.ts

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

@Component({
    selector: 'app-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.css']
})
export class ProductsComponent {
	
}

지난 시간에 ng g c products 로 생성했던 products.component.ts 파일입니다.

우선 templateUrl 로 지정되어있는 products.component.html 의 내용을 보시죠.

<app-product></app-product>
<app-product></app-product>

내용이 이렇게 짧아 굳이 html 파일을 만들필요가 없겠다 싶은 경우,

다음과 같이 인라인 템플릿으로 바꿔주시면 됩니다.

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

@Component({
    selector: 'app-products',
    template: '<app-product></app-product><app-product></app-product>',
    styleUrls: ['./products.component.css']
})
export class ProductsComponent {
	
}

templateUrl 에서 Url 을 뺀 template 으로 바꿔주시고 그안에 소스를 직접 입력해주세요. 주의하실 부분은 ' ' 으로 소스를 작성하면 줄바꿈이 되지 않습니다.

여러줄을 입력하고 싶으면 다음과 같이 

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

@Component({
    selector: 'app-products',
    template: `
    	<app-product></app-product>
    	<app-product></app-product>`,
    styleUrls: ['./products.component.css']
})
export class ProductsComponent {
	
}

` ` 으로 감싸주어야 합니다.

 

style도 똑같습니다! 이제 간단하게 설명드릴게요. 다음처럼

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

@Component({
    selector: 'app-products',
    template: `
    	<app-product></app-product>
    	<app-product></app-product>`,
    styles: [`
    	app-product {
        	color: red;
    	}
    `]
})
export class ProductsComponent {
	
}

Url 빼주시고 여러줄이니 ` ` 로 감싸주시고 스타일 적용하면 됩니다!

 

다음은 selector 를 수정해볼건데요.

app-products 를 다음처럼 대괄호로 감싸볼게요.

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

@Component({
    selector: '[app-products]',
    template: `
    	<app-product></app-product>
    	<app-product></app-product>`,
    styles: [`
    	app-product {
        	color: red;
    	}
    `]
})
export class ProductsComponent {
	
}

자, 이제는 속성으로 가져옵니다. 우선 돌려보면 에러가 납니다.

app.component.html 에 <app-products></app-products> 로 컴포넌트를 가져왔는데 속성선택기 [] 로 감싸 이제는 다음과 과 같이 속성으로 가져와야 합니다.

<h1>this is AppComponent!</h1>
<hr>
<!-- <app-products></app-products> -->
<div app-products></div>

.app-products 로 바꾸면 클래스로 가져옵니다.

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

@Component({
    selector: '.app-products',
    template: `
    	<app-product></app-product>
    	<app-product></app-product>`,
    styles: [`
    	app-product {
        	color: red;
    	}
    `]
})
export class ProductsComponent {
	
}

<h1>this is AppComponent!</h1>
<hr>
<!-- <app-products></app-products> -->
<!-- <div app-products></div> -->
<div class="app-products"></div>

결과는?

 

이상 컴포넌트 템플릿, 스타일 및 셀렉터를 수정해보았습니다.