[Angular] component selector

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

 가장 기본형이고 <app-test></app-test> 형태로 사용하게 된다.

 

 

 

 

 

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

@Component({
  selector: '[app-test]',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

selector 에 [] 를 해주는 경우에는

<div app-test></div app-test>

이런식으로 사용하게 된다. 즉 컴포넌트가 커스텀 attribute로서 기능하게 된다.

이때 <app-test></app-test> 이런식으로 사용하려고 하면 에러가 나게 된다.

 

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

@Component({
  selector: '.app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

 selector에 . 를 붙여주면 

<div class="app-test"></div> 

이렇게도 사용 가능하다.