unable to scroll background page when Ng Date Time Picker select

Question

I have used following Ng Date Time Picker for my angular form.

https://danielykpan.github.io/date-time-picker/

I am unable to scroll the background page when the date time picker is selected as it is disabled by default. What i need is to do is enable the page scrolling when the date picker is selected. In further investigation I have found that the scrollStratergy is set to "blockStratergy" by default. I have added a clicked event in the calendar and set the status changed to "noopStratergy".

Here is my HTML tag.

 <fieldset class="form-group">
                        <label>Occured After</label>
                        <div class="input-group">
                            <input formControlName="occuredAfter" [owlDateTimeTrigger]="datePicker2"
                                   [owlDateTime]="datePicker2"
                                   class="form-control" placeholder="mm/dd/yyyy HH:MM" id="occuredAfter">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary calendar fa fa-calendar" (click)="enablepage()"
                                        [owlDateTimeTrigger]="datePicker2" type="button" ></button>
                            </div>
                            <owl-date-time #datePicker2 [showSecondsTimer]="false"></owl-date-time>
                        </div>
                    </fieldset>

Here is my Stratergy changing method in .ts class,

public enablepage(): () => void {
             this.overlay.scrollStrategies.noop();
    }

But it gives me an error.

TypeError: this.overlay is undefined

Can any one find me a way to change the blockStratergy to "closeStratergy" or "noopStratergy".

Answer 1

You have to use like this.

import {
  ScrollStrategy,
  ScrollStrategyOptions
} from "@angular/cdk/overlay";

export class test implements OnInit {
  scrollStrategy: ScrollStrategy;
  
  constructor(private readonly sso: ScrollStrategyOptions) {
    this.scrollStrategy = this.sso.noop();//.reposition();
  }
}

Use like this

<owl-date-time [scrollStrategy]="scrollStrategy"  #yourdate></owl-date-time>