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?

Suren Srapyan · Accepted Answer · 2016-10-25 20:29:28Z

12

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

answered Oct 25, 2016 at 20:29

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yuvals Over a year ago

If I use ViewEncapsulation.None it breaks my imported (nested) class. I want to effect down the waterfall (the nested component) but not be effected from outside the host component.

Suren Srapyan Over a year ago

@Yuvals I don't understand your case clearly, but I think the problem is in the view encapsulation. Try to read the article given above

Yuvals Over a year ago

I updated the explanation - the problem is that I can't effect from outside a directive with CSS rules, unless the rules are in global styles.css

balslev Over a year ago

This helped me, i had some parent css that i could not get to work on my child component. .full-screen .info-box { height: 50vh; } Where my info-box was my child element. With "ViewEncapsulation.None", my info-box had its height set to 50vh.

Suren Srapyan Over a year ago

@balslev Very glad for you

Collectives™ on Stack Overflow

Apply css rules on nested component in Angular2 [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related