CODEWITHSUNDEEP
angularangular5overlayangular-templateangular-cdk
njwin07
njwin07

Reputation: 103

unable to update min-width of cdk-connected-overlay

I am using template refrence variable for this component. Here is how I have created an overlay for dropdown options

<ng-template
cdk-connected-overlay
[minWidth]="optionsWidth"
[open]="isOpen"
[origin]="origin"
#optionsContainer
>

<div class="options">
  <ng-content></ng-content>
</div>

even after minwidth value is updated , the width of cdkconnectedoverlay doesn't change

I tried to update it using overlay ref below is the code

@ViewChild('optionsContainer')
  optionsContainer: CdkConnectedOverlay;

next i read the overlayref

this.optionsContainer.overlayRef

but this is always undefined, stuck with this can anyone help I am using angular cdk 5.XX version

Upvotes: 0

Views: 1801

Answers (2)

dalox
dalox

Reputation: 157

overlayRef will only exist once the overlay is attached. You can subscribe to the attach event to determine when it's attached and then apply the width you want.

this.optionsContainer.attach.subscribe(() => { // update width here })

Upvotes: 1

user10646712
user10646712

Reputation: 1

add positionChange attribute and try code:

this.optionsContainer.overlayRef.updateSize({minWidth: this.optionsWidth})

Upvotes: 0

Related Questions