css Question posted in
Some basic documentation can be found here.

In Angular, the child component does not understand the CSS of the parent component

In Angular 17, I have a div with the class wrapper-my

.wrapper-my {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch
  width: 100%
}

.my-class {
  width: inherit;
}

// parent component
<div class="wrapper-my">
    <input type="text" class="my-class">
    <app-input-my></app-input-my>
</div>

And in app-input-my I have an input.

.my-class2 {
  width: inherit
}
<input type="text" class="my-class2">

The input that is not in a component fills the entire space.

However, the input that is in app-input-my does not fill the entire space

Even after doing this, it still doesn’t work.

<app-input-my class="my-class"></app-input-my>

How do I make my component work correctly according to the parent tag?

Tags:

2

Answers


  1. 0

    What can work is ::ng-deep

    docs

    It is "deprecated" for years.

    from the docs:

    The following example targets all elements, from the host element down through this component to all of its child elements in the DOM.

    :host ::ng-deep h3 {
  font-style: italic;
}
    Login or Signup to reply.
  2. 0

    Angular shims the css classes to emulate view encapsulation (a bit like with ShadowDom).

    For your parent style to work on your child component you have to either :

    • Make you style global
    • use ViewEncapsulation.None on the parent.

     

    @Component({
  ...,
  encapsulation: ViewEncapsulation.None,
})
export class WrapperParentComponent { }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search