Apply css rules on nested component in Angular2 [duplicate]

Question

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?

Answer 1

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