CODEWITHSUNDEEP
angularbootstrap-modalangular-ui-bootstrap
Hemanth SP
Hemanth SP

Reputation: 99

ng deep styles make separate for different component in Angular 5

i am using **ngx bootstrap modal** in two different component and in two different component i used ::ng-deep .modal-dialog to set width and height 

in component one

::ng-deep .modal-dialog {
width: 200px;
height : 200px
}

in another(2nd) component 
::ng-deep .modal-dialog {
    width: 400px;
    height : 400px
    }

but when i move to one component to another, the ::ng-deep values becomes same looks like constants width and height this css values of the modal not changing according to component level its like global level

Upvotes: 0

Views: 1512

Answers (1)

Andriy
Andriy

Reputation: 15442

try to add custom class as explained here. In this example gray modal-lg CSS class is added to existing modal-dialog class:

<div role="document" class="modal-dialog gray modal-lg">
  <div class="modal-content">
    ...
  </div>
</div>

so, try to add different classes in each component (component1 and component2 in my example) and rewrite your CSS:

::ng-deep .modal-dialog.component1 {
  width: 200px;
  height : 200px
}

in another(2nd) component 

::ng-deep .modal-dialog.component2 {
  width: 400px;
  height : 400px
}

Note, that once component is loaded this CSS class will be available globally (because of ::ng-deep) so the latest class with the same name will win.

Upvotes: 1

Related Questions