Style differnt instances of parent component differently according to child inside

Question

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;
    }
}

Answer 1

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.