How to apply css by parent to child component in angular

Question

I have an Angular 13 app & a couple of components structure look as below

logo component

<svg enable-background="new 0 0 2014 1674.641" version="1.1" 
viewBox="0 0 2014 1674.641" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
</svg>

header component

<div class="appHeader">
   <a href="https://mysite"> 
     <app-logo> </app-logo>
   </a>

I'm trying to set the width & height of the svg (logo-component) from the header-component

header.component.css

  .appHeader svg 
   {
    width: 20rem;
    height: 3.5rem;
   }

However, this way CSS intended for svg logo is not reflected. How can I apply CSS to such child component from its parent component?

Thanks!

Chellappan வ · Accepted Answer · 2022-05-11 11:02:39Z

2

Since component style are encapsulated by default. you should use ::ng-deep to disable view-encapsulation for that rule

::ng-deep .appHeader svg {
    width: 20rem;
    height: 3.5rem;
 }

answered May 11, 2022 at 11:02

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

5 Comments

Murugan Over a year ago

ng-deep deprecated

Chellappan வ Over a year ago

@Murugan The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>>, and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

Chellappan வ Over a year ago

As of angular 17 using ::ng-deep should be fine I guess

Murugan Over a year ago

angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Chellappan வ Over a year ago

@Murugan angular.io/guide/…

Collectives™ on Stack Overflow

How to apply css by parent to child component in angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related