angularangular-material2angular-cdk

Declarative creation of an Overlay with ScrollStrategy


TL,DR; How can a scroll strategy be used when creating a CdkConnectedOverlay declaratively?

Detail; CdkConnectedOverlay is a Directive to facilitate declarative creation of an Overlay.

It provides numerous @Input() properties, most of which are intuitive. For example:

<ng-template cdkConnectedOverlay
             cdkConnectedOverlayOpen="true"
             cdkConnectedOverlayOffsetX="0"
             cdkConnectedOverlayOffsetY="0">

    <span>I'm an overlay</span>
</ng-template>

One property defines a scroll strategy:

@Input('cdkConnectedOverlayScrollStrategy')
scrollStrategy: ScrollStrategy

Strategy to be used when handling scroll events while the overlay is open.

However it's not clear how to define a scroll strategy when creating an overlay declaratively.

The source code (material2/src/cdk/overlay/overlay-directives.ts) provides a little insight:

  /** Strategy to be used when handling scroll events while the overlay is open. */
  @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy =
      this._scrollStrategy();

Clearly, a strategy can be provided, but unlike other properties, it's assigned a value of this._scrollStrategy();.


Solution

  • I don't know if it's the optimal way to do it, but in order to help with a solution. This is what I did:

    scrollStrategy: ScrollStrategy;
    
    constructor (private sso: ScrollStrategyOptions) {
        this.scrollStrategy = sso.<select-your-strategy>();
    }
    

    And then on the view you just have to

    <ng-template cdkConnectedOverlay
                 cdkConnectedOverlayOpen="true"
                 cdkConnectedOverlayOffsetX="0"
                 cdkConnectedOverlayOffsetY="0"
                 [cdkConnectedOverlayScrollStrategy]="scrollStrategy">
        <span>I'm an overlay</span>
    </ng-template>