Declarative creation of an Overlay with ScrollStrategy

Question

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();.

Sievert

Answer 1

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>

Gamin

Answer 2

you can involve the different scroll strategy via this.

@Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy = this.scrollStrategies.block();

Packet

Answer 3

I saw Angular Material Docs in github and noticed that they use Overlay service.

import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';

scrollStrategy: ScrollStrategy;

constructor(private overlay: Overlay) {
    this.scrollStrategy = this.overlay.scrollStrategies.reposition(); // or block, close, noop
}

Analeptic