Apply css rules on nested component in Angular2
angular, javascript
Solution
You need to change your component's `viewEncapsulation`.
import { ViewEncapsulation} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'search-form',
templateUrl: 'search-form.component.html',
styleUrls: [ 'search-form.component.css'],
encapsulation: ViewEncapsulation.None
})
Angular 2 comes with view encapsulation built in, which enables us to use `Shadow DOM`. There are three view encapsulation types:
1) ViewEncapsulation.None - No Shadow DOM at all. Therefore, also no style encapsulation.
2) ViewEncapsulation.Emulated - No Shadow DOM but style encapsulation emulation.
3) ViewEncapsulation.Native - Native Shadow DOM with all it’s goodness.
For more see VIEW ENCAPSULATION IN ANGULAR 2
Problem
I have a nested component SearchBar as a child of my Header. My component definition: ``` @Component({ moduleId: module.id, selector: 'search-form', templateUrl: 'search-form.component.html', styleUrls: [ 'search-form.component.css'] }) ``` search-form.component.html is using the following directive inside: ``` <tag-input placeholder="Add tags ..." [(model)]="tagsArray" (tagsChanged)="onTagsChange($event)" (tagsAdded)="onTagsAdded($event)" (tagRemoved)="onTagRemoved($event)" [delimiterCode]="[32]"></tag-input> ``` and inside search-form.component.html I have the following rule: ``` .ng2-tag-input-field { padding: 5px; border-radius: 6px; margin-right: 10px; direction: ltr; text-align: right; } ``` The CSS rules have no effect on the nested directive, unless I put the CSS inside Styles.css file. Why this isn't working as expected?