Style differnt instances of parent component differently according to child inside-CodePudding

I have a component which has several open instances at the same time, each one has another component inside(It's a component wrapper for modal) and I want each modal instance to have a different size. How can I set that each component instance will have a diffrent style?? while I can only set it from the child?

for one modal:

:host ::ng-deep {
  .modal-dialog {
    width:300px;
  }
}

for the other

:host ::ng-deep {
    .modal-dialog {
      width:600px;
      background:none;
      padding:2px;
    }
}

CodePudding user response：

For full browser support, CSS cannot go up, only down.

This means a child component cannot condition the CSS of its parent.

But what you CAN do, is only give a min-width to your wrapper (let's say 300px). The width should be kept to auto. (You could also give it a max width if you need).

Then, your children of that wrapper, should have their own size. With this, the wrapper, having its width to auto, should automatically adapt to the size of its child.

CodePudding user response：

Your best bet would be to give each child component a specific class, then you can use the :has() pseudo class on the parent

.modal-dialog {
  height: 100px;
  border: 1px solid red;
  padding: 2px;
}

.modal-dialog:has(.width1) {
  width: 100px;
}

.modal-dialog:has(.width2) {
  width: 200px;
}

<div >
  <div ></div>
</div>
<div >
  <div ></div>
</div>