How to use the igniteui-angular.GlobalPositionStrategy function in igniteui-angular

@ViewChild("overlayDemo")
    public overlayDemo: ElementRef;

    @ViewChild("mainContainer")
    public mainContainer: ElementRef;

    private _defaultPositionSettings: PositionSettings = {
        target: null,
        horizontalDirection: HorizontalAlignment.Center,
        horizontalStartPoint: HorizontalAlignment.Center,
        verticalDirection: VerticalAlignment.Middle,
        verticalStartPoint: VerticalAlignment.Middle
    };

    private _overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: true,
        closeOnOutsideClick: true
    };

    private destroy$ = new Subject();
    private _overlayId: string;

    constructor(
        @Inject(IgxOverlayService) public overlay: IgxOverlayService
    ) {
        //  overlay service deletes the id when onClosed is called. We should clear our id
        //  also in same event
        this.overlay
            .onClosed
            .pipe(

public outlet: IgxOverlayOutletDirective;

    @ViewChild("dialog1", { read: IgxDialogComponent, static: true })
    public dialog: IgxDialogComponent;

    private _animaitonSettings: PositionSettings = {
        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: "translateY(100%)" } }),
        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: "translateY(-100%)" } })
    };

    private _dialogOverlaySettings2 = {
        closeOnOutsideClick: false,
        modal: true,
        outlet: this.outlet,
        scrollStrategy: new CloseScrollStrategy(),
        positionStrategy: new GlobalPositionStrategy(this._animaitonSettings)
    };

    public openDialog() {
        this._dialogOverlaySettings2.outlet = this.outlet;
        this.dialog.open(this._dialogOverlaySettings2);
    }
}

public onClickDirectionGlobal(horAlign: HorizontalAlignment, vertAlign: VerticalAlignment) {
        const positionSettings =
            Object.assign(Object.assign({}, this._defaultPositionSettings), {
                target: this.directionDemo.nativeElement,
                horizontalDirection: horAlign, verticalDirection: vertAlign
            });
        const showSettings =
            Object.assign(Object.assign({}, this._overlaySettings), {
                positionStrategy: new GlobalPositionStrategy(positionSettings)
            });
        this.overlay.show(this.overlayDemo, showSettings);
    }

@ViewChild("overlayDemo")
    public overlayDemo: ElementRef;

    @ViewChild("mainContainer")
    public mainContainer: ElementRef;

    private _defaultPositionSettings: PositionSettings = {
        target: null,
        horizontalDirection: HorizontalAlignment.Center,
        horizontalStartPoint: HorizontalAlignment.Center,
        verticalDirection: VerticalAlignment.Middle,
        verticalStartPoint: VerticalAlignment.Middle
    };

    private _overlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: true,
        closeOnOutsideClick: true
    };
    constructor(
        @Inject(IgxOverlayService) public overlay: IgxOverlayService
    ) { }

    public onClickDirection(horAlign: HorizontalAlignment, vertAlign: VerticalAlignment) {
        const positionSettings =
            Object.assign(Object.assign({}, this._defaultPositionSettings), {
                target: this.directionDemo.nativeElement,
                horizontalDirection: horAlign, verticalDirection: vertAlign
            });
        const showSettings =
            Object.assign(Object.assign({}, this._overlaySettings), {

verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        });
        let positionStrategy;
        switch (strategy) {
            case ("auto"):
                positionStrategy = new AutoPositionStrategy(positionSettings);
                break;
            case ("elastic"):
                positionStrategy = new ElasticPositionStrategy(positionSettings);
                break;
            case ("connected"):
                positionStrategy = new ConnectedPositioningStrategy(positionSettings);
                break;
            default:
                positionStrategy = new GlobalPositionStrategy(Object.assign(positionSettings, {
                    horizontalDirection: HorizontalAlignment.Center,
                    verticalDirection: VerticalAlignment.Middle
                }));
        }
        const showSettings = Object.assign(Object.assign({}, this._overlaySettings), {
            modal: this.modalValue,
            positionStrategy
        });
        this.overlay.show(this.overlayId, showSettings);
    }

target: this.modalDemo.nativeElement,
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Right,
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        });
        let positionStrategy;
        switch (strat) {
            case ("auto"):
                positionStrategy = new AutoPositionStrategy(positionSettings);
                break;
            case ("connected"):
                positionStrategy = new ConnectedPositioningStrategy(positionSettings);
                break;
            default:
                positionStrategy = new GlobalPositionStrategy(Object.assign(positionSettings, {
                    horizontalDirection: HorizontalAlignment.Center,
                    verticalDirection: VerticalAlignment.Middle
                }));
        }
        const showSettings = Object.assign(Object.assign({}, this._overlaySettings), {
            modal: this.modalValue,
            positionStrategy
        });
        this.overlay.show(this.overlayDemo, showSettings);
    }
}