CODEWITHSUNDEEP
cssangularnestedcomponents
Denver Dang
Denver Dang

Reputation: 2615

Class from parent component doesn't work in child component

I have a component which have HTML inside looking like this:

<div class="wrapper">
  <lqs-myComponent class="my-component" [ngClass]="myComponentStatus ? 'is-active' : ''"></lqs-myComponent>
</div>

The CSS (or some of it) for this component is:

.wrapper {

  .my-component {
    display: grid;
    width: 100%;
    justify-self: center;
    box-sizing: border-box;
    border-radius: 5px;
    row-gap: 5px;
    align-self: start;

    &.is-active {

      > div {
        transition: all 0.1s ease-in-out;
        transform: translateY(0px);

        @for $i from 0 through 50 {
          &:nth-child(#{$i + 1}) {
            transition-delay: (0.05s * $i) + 0.50s;
            opacity: 1;
          }
        }
      }
    }
  }
}

The basic idea is some animation happens to the divs inside the lqs-myComponent when is-active is applied by some click event on the page. So the divs in that component is just something like:

<div>Hello</div>
<div>Hello hello</div>
<div>Hello hello hello</div>

With the CSS:

div {
  transition: all 0.05s ease-in-out;
  transform: translateY(20px);
  opacity: 0;
}

My problem is, that the page above (with the wrapper) is where the (click) event is happening, so it is also where the is-active class is applied. However, the actual lqs-myComponent component, which just contains a bunch of divs (which should be animated), well, they are not animated at all.

I can see that the is-active class is applied when the button is clicked, but I'm guessing something ain't working right when the class is applied in another component, but should be working in a different component.

I fairly new to Angular, so I am not sure how to solve this at the moment ?

Upvotes: 0

Views: 717

Answers (1)

Mehdi Shakeri
Mehdi Shakeri

Reputation: 622

In Angular, component CSS styles are encapsulated into the component's view and don't affect the rest of the application , To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata.

encapsulation: ViewEncapsulation.None

or use deprecated ::ng-deep on your classes

Upvotes: 1

Related Questions