Styling Angular 2 component tag

Question

Inside my app-root component, I've app-container component. How would I style the app-container component?

HTML:

<app-container></app-container>

CSS:

app-container {
  background: red;
}

^ The above css doesn't work.

I want to style and position the app-container component. I tried googling but couldn't find a proper solution. Please Help.

Thanks in advance!

Answer 1

Yes there is. If you have enabled shadow-dom or the emulation of shadow-dom you can style the tag via the :host property. (Emulation is enabled per default)

E.G.

:host{
   background-color:red;
}

I highly suggest you this article: https://angular.io/guide/component-styles

Your css code above should work if it is in the global css file not in the component css file.

Don't forget to check the styleUrl path. Here an example of styleUrls.

@Component({
  selector: 'hero-details',
  template: `
    <h2>{{hero.name}}</h2>
    <hero-team [hero]=hero></hero-team>
    <ng-content></ng-content>
  `,
  styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
/* . . . */
}

Here more details on emulated / native -shadow dom: https://angular.io/guide/component-styles#view-encapsulation