CODEWITHSUNDEEP
cssangular
user1589188
user1589188

Reputation: 5736

Specifying style class for nested angular 2 component

Say inside my.component.html

<nested-component [class]="nestedClass"></nested-component>

Then when I want to use my component, I want to specify both their style classes:

<my-component class="my-component-style" nestedClass="nested-component-style"></my-component>

The above did not work (i.e. the nested-component did not get assigned the style class .nested-component-style). How would you fix the code above? Other workarounds are welcome.

Upvotes: 2

Views: 1640

Answers (3)

Uğur Din&#231;
Uğur Din&#231;

Reputation: 2455

Use

/deep/ .nested-component-style

or 

>>> .nested-component-style

in the parent component to have it applied to it's children.

Or to be safer, put your .nested-component-style in styles.css in app level to have it globally defined.

Beware of lack of browser support of /deep/ and >>> selectors.

More info here.

Upvotes: 3

Nuru Salihu
Nuru Salihu

Reputation: 4948

my.component.html

<nested-component class="nestedClass"></nested-component>

And inside my.component.ts

@Input() nestedClass: string;

and in nexted.component.html

<my-component class="my-component-style" [nestedClass]="'nested-component-style'"></my-component>

Upvotes: 1

Imran
Imran

Reputation: 3072

This is correct. just add a @Input variable in your child component just link

  @Input() nestedClass = '';

Upvotes: 1

Related Questions