CODEWITHSUNDEEP
cssangularparent-child
Raj Patel
Raj Patel

Reputation: 3

How to apply style to child component from parent component when we have 2 child component

I have a child component that is a spinner, I want to display this in 2 places. With a different style. I am trying below:

my-loading-overlay ::ng-deep .loading:after {
  top: 80px;
}

it is working for the first one as expected but how to changes style for the second child component CSS property top:150px

Thanks in advance

Upvotes: 0

Views: 57

Answers (2)

Swamp
Swamp

Reputation: 11

You should declare those styles globally and not use ::ng-deep since it is deprecated. See https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

try something like this:

<my-loading-overlay class="first"></my-loading-overlay>
<my-loading-overlay class="second"></my-loading-overlay>



my-loading-overlay {
  display: block;

  &.first {
    .loading:after {
      top: 80px;
    }
  }

  &.second {
    .loading:after {
      top: 20px;
    }
  }
}

Upvotes: 1

AliF50
AliF50

Reputation: 18899

Try this:

Your parent component:

// add first-one and second-one attributes to be able to select with css
<my-loading-overlay first-one></my-loading-overlay>
<my-loading-overlay second-one></my-loading-overlay>

my-loading-overlay[first-one] ::ng-deep .loading:after {
  top: 80px;
}

my-loading-overlay[second-one] ::ng-deep .loading:after {
  top: 150px;
}

Upvotes: 0

Related Questions