In Angular2, when I add a class tag on my custom Angular2 component like so:
<my-component class="someClass"></my-component>
...the styling does not get applied to the HTML. In Chrome Developer tools, when I select my-component element, the styles inspector shows that the styles are being applied, but visually, they are not. Is this normal? How do I get around that?
Angular 2 use Shadow DOM, that is part of the Web Components standard and enables DOM tree and style encapsulation. Angular View Encapsulation
So if you want to style something in my-component you should write your class's in my-component class.
import { Component, OnInit } from '@angular/core';
@Component({
teamplte: '<h1 class="myClass">i am my-component</h1>',
styles: [`
.myClass {
someProp: value;
}
`]
})
export class ConatinerComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
but if you want to style outside you must to write your styles and classes in container component!
import { Component, OnInit } from '@angular/core';
@Component({
teamplte: '<my-component class="myClass"></my-component>',
styles: [`
.myClass {
someProp: value;
}
`]
})
export class MyComponentComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
If you want to pass any thing like className then use bindings:
@Component({
selector: 'my-component',
template: template,
styleUrls: ['app/components/nav-bar/nav-bar.style.css'], // or you can add explicit style,
bindings:{
className: '<'
}
})
HTML
<my-component class-name="someClass"></my-component>
Hope this will help you.
Why do you use this method? All you need is to add some styles to your my-component.
CSS
my-component {
background: black;
text-align: center;
}
And of course, in your component to add html code
