Reference a class in a child component from its parent

Question

I am trying to set some styles on a child component based on a class applied to the child. The component has the option to add a class but I am not able to reference it from the parent component.

I have a components that consists of a typescript file, that probably does not matter, an html file and a scss file.

The html file (simplified) is: viewer.component.html:

<navigator class="test-class">
    <other stuff...>
</navigator>

I can see that in the html generated the navigator tag has the expected class.

The html scss (simplified) is:

viewer.component.scss:

.test-class {
   color: red;    
}

:host ::ng-deep .test-class {
   color: red;
}

::ng-deep .test-class {
   color: red;
}

If I write the same css in a global css, it works as expected.

check out here https://stackoverflow.com/questions/36738902/angular2s-components-styles-are-not-inherited-in-the-encapsulated-child-compon — Haifeng Zhang, Mar 06 '18 at 16:29
If it is a child of the component where you add the styles, you don't need `::ng-deep`. Please provide more code for us to be able to determine the relation of the styles to the components involved — Günter Zöchbauer, Mar 06 '18 at 16:31
you can just use `@ViewChild()` to access the child html and do what you need on it. — Mike Tung, Mar 06 '18 at 17:40
@MikeTung The class is applied on the child. I only want to know how to define in viewer.component.scss the css rule to modify the color. — Eligio Eleuterio Fontana, Mar 06 '18 at 17:57
Possible duplicate of [How to style child components from parent component's css file?](https://stackoverflow.com/questions/36527605/how-to-style-child-components-from-parent-components-css-file) — Marco Altieri, Mar 07 '18 at 08:15

Reference a class in a child component from its parent

0 Answers0