CODEWITHSUNDEEP
angularangular-material2angular-cdk
Jack
Jack

Reputation: 10613

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

Upvotes: 5

Views: 4227

Answers (3)

Sandeep
Sandeep

Reputation: 471

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
}

Upvotes: 0

MichaelShake
MichaelShake

Reputation: 352

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>

Upvotes: 6

Noelchan
Noelchan

Reputation: 140

you can involve the different scroll strategy via this.

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

Upvotes: 1

Related Questions