angular material 7 cdkoverlay set transparent/custom backdrop class

Question

I am using the cdkoverlay which seems to have a default dark backdrop. Looking at the docs Overlay Documentation , I should be able to change to a transparent backdrop by setting the backdrop class. Am I doing something wrong?

angular version - 7.2.7
cdk version - 7.3.3

<button mat-icon-button (click)="isOpen = !isOpen" cdkOverlayOrigin 
        #trigger="cdkOverlayOrigin">
  <mat-icon>opacity</mat-icon>
</button>

<ng-template cdkConnectedOverlay 
        [cdkConnectedOverlayHasBackdrop]="true"
        [cdkConnectedOverlayBackdropClass]="cdk-overlay-transparent-backdrop"   
        (backdropClick)="isOpen = false" 
        [cdkConnectedOverlayOrigin]="trigger" 
        [cdkConnectedOverlayOpen]="isOpen">

    <div class="e6-menu-panel" role="dialog">
    <div class="e6-grid-container" role="listbox" tabindex="0" cdkTrapFocus>
    <div class="e6-grid-item" *ngFor="let theme of themes; index as i"
        (click)="install(theme); isOpen=false" role="option"
        [style.background-color]="theme.primary">

        <mat-icon class="e6-active-icon" *ngIf="current == theme">
          check_circle
        </mat-icon>
    </div>
    </div>
    </div>

</ng-template>

Answer 1

I was adding the transparent class the wrong way:

[cdkConnectedOverlayBackdropClass]="cdk-overlay-transparent-backdrop"

This is the right way:

cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"

From the Documentation :

One-time string initialization

You should omit the brackets when all of the following are true:

• The target property accepts a string value.
• The string is a fixed value that you can bake into the template.
• This initial value never changes.