Modifying the CSS of a template of a component in another component

I am calling component A as a child-component in component B. Component A has a div class containing CSS that I need to modify in Component B. How do I access that div class from component B?

div

div

Template of component A:

<div class="something">
.
.

</div>


Template of component B:

<app-componentA></app-componentA>


1 Answer
1

You shouldn't really do that, you can have an input of the styles/classes you want applied for the child component, however if you need to do it, you can use ngdeep (deprecated) here

EDIT

You can pass an input (which indeed is just a JavaScript object) from the parent component, and assign that dynamically in the child component like that:

Child component:

<div [ngStyle]="inputStyle">
</div>


And its TS:

@Input() inputStyle; //This is the input received from the parent component


Then in the parent component, you can pass the CSS as a JavaScript object normally like the following :

<app-componentA [inputStyle]="backgroundColor: 'red', 'height': '100px'"></app-componentA>


This example sets the style to a static styles object passed through the HTML, of course this can be used with dynamic object (that you assign through the parent's TS file), or you can even pass custom class names using the same concept but using ngClass instead of ngStyle in the child component

ngClass

ngStyle

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.