Component'in ana container'ı için style tanımlama :host

Mesela bir bileşeniniz var. Şu şekilde...

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

@Component({
    selector: 'my-component',
    templateUrl: 'my-component.component.html',
    styleUrls: ['my-component.component.scss'],
})
export class MyComponent {
    constructor() {

    }
}

ve bu bileşenin html'i de boş. Bu durumda siz

<my-component></my-component>

şeklinde bileşeninizi kullanırken oluşan ana container'ı div'ine nasıl style vereceksiniz?

İlk bakışta şöyle bir hamle çalışır gibi gözüküyor.

my-component {

  width: 100px;

  height: 100px;

  background-color: red;

}

fakat bu style'ın bileşeninize uygulanmadığınız göreceksiniz. Angular bileşenlerin style'ları arasında izolasyon sağlamak için style'lar üzerinde modifikasyon yapıyor. Böyle olunca da sizin tag'inizle class isminiz birbiriyle buluşamıyor. Çözüm :host ifadesi.

my-component:host {

  width: 100px;

  height: 100px;

  background-color: red;

}

şeklinde kodunuzu değiştirdiğinizde bi bakmışsınız çalışaaayor.

Çözümü Eren Eraldemir arkadaşımız Japonya'da buldu :D

Flawless Victory!