Add custom class to md-dialog-container

Question

I have a button that opens a md-dialog-container. Is it possible to add a custom class to the root of that md-dialog-container?

<button class="button bluebutton right" ng-click="vm.launchContactActivityPopup()" ng-if="vm.isPersisted()" ng-disabled="!vm.isAllowedToRegisterContactActivity()">Contactd vastleggen</button>

public launchContactActivityPopup(): void {
  this.$mdDialog.show({
    template: `<register-contact-activity-popup></register-contact-activity-popup>`,
    targetEvent: null,
    clickOutsideToClose: false
  });
}

@AdityaParab I need to add the class to the material dialog. — Peter Boomsma, Apr 16 '18 at 16:13

score 3 · Accepted Answer · answered Apr 16 '18 at 16:14

3

Fixed it like this.

<md-dialog class="myClass">
    <register-contact-activity-popup></register-contact-activity-popup>
</md-dialog>`,>`,

answered Apr 16 '18 at 16:14

Peter Boomsma

8,851
16
93
185

score 1 · Answer 2 · answered Apr 16 '18 at 14:54

1

Use panelClass:

public launchContactActivityPopup(): void {
    this.$mdDialog.show({
        template: `<register-contact-activity-popup></register-contact-activity-popup>`,
        targetEvent: null,
        clickOutsideToClose: false,
        panelClass: 'myClass'
    });
}

answered Apr 16 '18 at 14:54

Jeffrey Roosendaal

6,872
8
37
55

1

I've come across that in my search but it doesn't work. Isn't panelClass for material design 2? I'm using AngularJS and Material Design. – Peter Boomsma Apr 16 '18 at 15:01
Worked with "@angular/material": "^9.0.1" version, Thanks! – ebem Sep 02 '20 at 11:12

Add custom class to md-dialog-container

2 Answers2