angular 10 selector tag 생성되지 않도록 만들기

@Component({
    selector: "app-01"
    ,templateUrl: './app.01.component.html'
    ,providers: []
})

이런 컴포넌트를 만들고 다른 컴포넌트 템플릿에서 호출할 때 보통 selector tag 를 그냥 쓴다

<div>
    <app-01>머라머라</app-01>
</div>

출력해보면 저 모양 저대로 나오는데 css 에서 자식 노드 문제가 발생하는 경우가 생긴다

그러면 이렇게 할 수 있다

 

@Component({
    selector: "[app-01]"
    ,templateUrl: './app.01.component.html'
    ,providers: []
})

<div>
    <div app-01>머라머라</div>
</div>

이렇게 하면 된다