Need to increase the max-width of modal when the route click

Question

I want to do if the logs click I need to increase the modal max-width to 80% and other routes need to set max-width to 50%. I use the ::ng-deep because their styles come from bootstrap. therefore I need to override those. but this one is not working for me.

This is my HTML,

<mat-sidenav mode="side" opened>
              <button
                mat-button
                class="menu-button"
                routerLink="/settings"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.settings" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/pin"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.changepin" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/logs"
                [ngClass]="{'logs-button-clicked': isLogsLinkClicked}"
                (click)="syncDevice()"
                routerLinkActive="active"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.logs" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/automatic-upgrade"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.automaticupgrade" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/cache"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.cache" | translate }}</span>
              </button>
              <button
                mat-button
                class="menu-button"
                routerLink="/unit-info"
                routerLinkActive="active"
                [ngClass]="{'other-button-clicked': !isLogsLinkClicked}"
                (click)="otherDevice()"
              >
                <!-- <mat-icon></mat-icon> -->
                <span>{{ "label.name.unitinfo" | translate }}</span>
              </button>
            </mat-sidenav>

And this is my ts function,

export class QmSettingsAdminModalComponent implements OnInit {
  @Input() unitId: any;
  public isLogsLinkClicked = false;

  constructor(
    public activeModal: NgbActiveModal,
    private deviceService: DeviceService,
    private router: Router
  ) {}
  ngOnInit() {}

  syncDevice() {
    this.isLogsLinkClicked = true;
  }

  otherDevice() {
    this.isLogsLinkClicked = false;
  }
}

This is my scss,

.other-button-clicked {
  ::ng-deep .modal-dialog {
    max-width: 50% !important;
    margin-left: auto;
    margin-right: auto;
  }
}

.logs-button-clicked {
  ::ng-deep .modal-dialog {
    max-width: 80% !important;
    margin-left: auto;
    margin-right: auto;
  }
}

Answer 1

When you open a ngb-modal you can indicate a class of the "modal-dialog" using the NgbModalOptions. If you see the docs you see that there a property "modalDialogClass" so you can use some like:

this.modalService.open(content, { 
             ariaLabelledBy: 'modal-basic-title',
             modalDialogClass:'short'})

So your modal dialog is a modaldialog and sort. So you can add in "styles.css" (*)

.modal-dialog.short .modal-content {
  max-width: 50%;
  margin: auto;
}

Idem, you can have a .css

.modal-dialog.large .modal-content {
  max-width: 80%;
}

And use modalDialogClass: 'large'

(*)Generally it's better use a more specificity .css and add the styles in a .css that you use in all the aplication instead of use ::ng-deep

Update the correct should implied the media-screen, e.g.

  .modal-dialog.short .modal-content {
    max-width: 50%;
  }
  @media (min-width: 576px) {
    .modal-dialog.large {
      max-width: 100%;
      min-width: 100%;
      margin: auto;
    }
  }

See stackblitz (NOTE: In the stackblitz the .css is in the own index.html, we can use the styles.css or another global style