Question 220915 in CSS Question posted in
Some basic documentation can be found here.

How to set css from another component in angular

I am trying to change wrapper background color from another component. I ave tried using ::ng-deep But not working properly.
For mauto component background should be like block color.
For vgud component background should be like green color.

mauto.component.css:

::ng-deep.wrapper {
  background: red !important;
}

vgud.component.css:

::ng-deep.wrapper {
  background: green !important;
}

app.component.html:

<div class="wrapper">
  <app-mauto></app-mauto> 
</div>

<div class="wrapper"> 
  <app-vgud></app-vgud>
</div>

app.component.css:

.wrapper{
  width:600px;
  height:240px;
  background: black;
}

Demo: https://stackblitz.com/edit/angular-ivy-qdhsyh?file=src%2Fapp%2Fapp.component.html

Tags:

2

Answers


  1. 0

    even considering that it is possible

    ::ng-deep.wrapper:has(app-mauto) {
  background: red !important;
}

    it is for sure a bad solution.

    correct way would be to put styles in the component, whose template contains the elements that you want to style

    .wrapper {
  ...
  &--mauto { // no ng-deep needed
    background: red !important;
  }
}


------ 
<div class="wrapper wrapper--mauto">
  <app-mauto></app-mauto> 
</div>
....
    Login or Signup to reply.
  2. 0

    app-mauto and app-vgud components shouldn’t be responsible for the outside background. I would move the wrappers inside the components and .wrapper class to the global styles. Like that: https://stackblitz.com/edit/angular-ivy-hzsgah?file=src%2Fstyles.css

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search