I am currently working on a component that contains multiple instances, each with its own unique internal component (acting as a modal wrapper). I need to customize the size of each modal instance independently. How can I achieve this customization when the styling is applied from the child component itself?
For one modal:
:host ::ng-deep {
.modal-dialog {
width:300px;
}
}
For the other modal:
:host ::ng-deep {
.modal-dialog {
width:600px;
background:none;
padding:2px;
}
}