Specifying style class for nested angular 2 component

Question

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.

Can you elaborate more? Is nested embedding my component or the other way round ? Your question is not clear. — Nuru Salihu, Jan 08 '18 at 04:02
@user1589188 I dont understand `` code. did you directly use this code? . this is not angular way to declare parent child — Imran, Jan 08 '18 at 04:19
@user1589188 In your css file, put /deep/ in front of your class definition like this: /deep/ .nested-component-style and see if it helps as this may be an issue with stylings not being applied on child components. — Uğur Dinç, Jan 08 '18 at 04:21

Uğur Dinç · Accepted Answer · 2018-01-08T04:40:42.707

3

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.

edited Jan 08 '18 at 04:40

answered Jan 08 '18 at 04:33

Uğur Dinç

2,415
1
18
25

Imran · Answer 2 · 2018-01-08T04:09:18.767

1

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

  @Input() nestedClass = '';

edited Jan 08 '18 at 04:09

answered Jan 08 '18 at 04:05

Imran

3,031
4
25
41

@user1589188 I just paste your code in my project and I see the class like `
Hello
` in my child component html – Imran Jan 08 '18 at 04:09
Yes it sees the style class name, but for some reason the style classes has a selector appended to them, like "my-component-style[_ngcontent-c5]" and "nested-component-style[_ngcontent-c5]". But is generated with "_ngcontent-c8", note the last digit different, this caused the style class failed to be applied to the nested component. – user1589188 Jan 08 '18 at 04:13

score 1 · Answer 3 · answered Jan 08 '18 at 04:10

1

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>

answered Jan 08 '18 at 04:10

Nuru Salihu

4,756
17
65
116

Yes this is what I have, it sees the style class name, but for some reason the style classes has a selector appended to them, like "my-component-style[_ngcontent-c5]" and "nested-component-style[_ngcontent-c5]". But is generated with "_ngcontent-c8", note the last digit different, this caused the style class failed to be applied to the nested component. – user1589188 Jan 08 '18 at 04:14
Can you have a look again? I don't think thats what you have though. You have `[class]` while mine is `class` and `[nestedClass]` . These are important. – Nuru Salihu Jan 08 '18 at 04:18
Yeah, tried both, same. But @dexter above gave a working solution! – user1589188 Jan 08 '18 at 04:24
1

Ok Cool. Another solution you can try is appending everything as HTML using safeHTML pipe you may have a look @ the answer Here – Nuru Salihu Jan 08 '18 at 04:26

Specifying style class for nested angular 2 component

3 Answers3

Hello