CODEWITHSUNDEEP
angular
Aravind Vasudevan
Aravind Vasudevan

Reputation: 121

Styling Angular 2 component tag

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!

Upvotes: 7

Views: 7737

Answers (1)

DaniS
DaniS

Reputation: 3489

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

Upvotes: 22

Related Questions