@angular/cdk/overlay#Overlay TypeScript Examples

constructor(host: ElementRef<HTMLElement>,
              formBuilder: FormBuilder,
              private _activatedRoute: ActivatedRoute,
              private _overlay: Overlay,
              private _injector: Injector) {
    this.form = formBuilder.group({
      [URL]: new FormControl('', Validators.required),
    });
    this.appEntryPoints = this.readAppEntryPoints();
  }

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        IndexModule,
        ViewModule,
        MatSidenavModule,
        HttpClientModule,
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
        ErrorService,
        MatSnackBar,
        Overlay,
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

constructor(
    private overlay: Overlay,
    @Inject(WINDOW) private window: Window,
  ) {
    this.overlayConfig = new OverlayConfig({
      // 全局显示，水平居中，位于顶部
      positionStrategy: this.overlay.position().global().centerHorizontally().top()
    });
  }

constructor(
    public overlay: Overlay,
    private viewContainerRef: ViewContainerRef,
    private overlayPositionBuilder: OverlayPositionBuilder,
    private elementRef: ElementRef,
    private utility: NpUtilityService
  ) {
    this.monthsList = [
      { key: 0, value: "January" },
      { key: 1, value: "February" },
      { key: 2, value: "March" },
      { key: 3, value: "April" },
      { key: 4, value: "May" },
      { key: 5, value: "June" },
      { key: 6, value: "July" },
      { key: 7, value: "August" },
      { key: 8, value: "September" },
      { key: 9, value: "October" },
      { key: 10, value: "November" },
      { key: 11, value: "December" },
    ];
    this.today = new Date();
    this.today.setHours(0, 0, 0, 0);
  }

export function scrollFactory(overlay: Overlay, tourService: NgxmTourService): () => ScrollStrategy {
  return () => {
    const step = tourService.currentStep,
        scrollStrategies = overlay.scrollStrategies,
        disablePageScrolling = !!step.disablePageScrolling;

    return disablePageScrolling ? scrollStrategies.block() : scrollStrategies.reposition();
  };
}

constructor(private _dialog: MatDialog,
    private _overlay: Overlay,
    private _ngZone: NgZone,
    private _viewContainerRef: ViewContainerRef,
    @Inject(MAT_DATEPICKER_SCROLL_STRATEGY) scrollStrategy: any,
    @Optional() private _dateAdapter: NgxMatDateAdapter<D>,
    @Optional() private _dir: Directionality,
    @Optional() @Inject(DOCUMENT) private _document: any) {
    if (!this._dateAdapter) {
      throw createMissingDateImplError('NgxMatDateAdapter');
    }

    this._scrollStrategy = scrollStrategy;
  }

constructor(private _dialog: MatDialog,
    private _overlay: Overlay,
    private _ngZone: NgZone,
    private _viewContainerRef: ViewContainerRef,
    @Inject(MAT_DATEPICKER_SCROLL_STRATEGY) scrollStrategy: any,
    @Optional() private _dateAdapter: NgxMatDateAdapter<D>,
    @Optional() private _dir: Directionality,
    @Optional() @Inject(DOCUMENT) private _document: any) {
    if (!this._dateAdapter) {
      throw createMissingDateImplError('NgxMatDateAdapter');
    }

    this._scrollStrategy = scrollStrategy;
  }

constructor(
    overlay: Overlay,
    viewContainerRef: ViewContainerRef,
    elRef: ElementRef,
    renderer: Renderer2,
    cdr: ChangeDetectorRef,
    ngZone: NgZone,
    private readonly toolTipIntl: TooltipCopyIntl,
  ) {
    super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone);
  }

public static openAsOverlay(config: {anchor: HTMLElement; routerOutlet: SciRouterOutletElement; overlay: Overlay; injector: Injector}): void {
    const {anchor, routerOutlet, overlay, injector} = config;

    const positionStrategy = overlay.position()
      .flexibleConnectedTo(anchor)
      .withFlexibleDimensions(false)
      .withPositions([OVERLAY_POSITION_SOUTH]);

    const overlayConfig = new OverlayConfig({
      panelClass: 'e2e-router-outlet-context-overlay',
      hasBackdrop: true,
      positionStrategy: positionStrategy,
      scrollStrategy: overlay.scrollStrategies.noop(),
      disposeOnNavigation: true,
      width: 500,
      height: 400,
      backdropClass: 'transparent-backdrop',
    });

    const overlayRef = overlay.create(overlayConfig);
    const portal = new ComponentPortal(RouterOutletContextComponent, null, Injector.create({
      parent: injector,
      providers: [
        {provide: OverlayRef, useValue: overlayRef},
        {provide: SciRouterOutletElement, useValue: routerOutlet},
      ],
    }));
    overlayRef.attach(portal);
  }

constructor(
		private dialogRef: MatDialog,
		private cdr: ChangeDetectorRef,
		private dialog: MatDialog,
		private overlay: Overlay,
		private localStorage: LocalStorageService,
		private restService: RestService,
		public clientService: ClientService,
		public viewportService: ViewportService,
		public themingService: ThemingService,
		public appService: AppService,
	) { }

constructor(private el: ElementRef, private overlay: Overlay, private tooltipService: TooltipService) {
    const pos = this.overlay.position().flexibleConnectedTo(this.el);
    pos.withPositions([
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
        offsetY: -13
      },
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
        offsetY: 15
      },
    ]);
    this.pos = pos;
  }

constructor(
    overlay: Overlay,
    viewContainerRef: ViewContainerRef,
    elRef: ElementRef<HTMLInputElement>,
    renderer: Renderer2,
    cdr: ChangeDetectorRef,
    ngZone: NgZone,
    @Optional()
    @Host()
    private readonly ngControl: NgControl,
  ) {
    super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone);
    this.type = TooltipType.Plain;
    this.trigger = TooltipTrigger.Manual;
    this.position = 'bottom start';
    this.hideOnClick = true;
  }

constructor(private overlay: Overlay) {}

describe('SaveChangesComponent', () => {
  let component: SaveChangesComponent;
  let fixture: ComponentFixture<SaveChangesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ SaveChangesComponent ],
      providers: [ MatSnackBar, Overlay ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SaveChangesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('click button, snackbar closes', () => {
    const button = fixture.debugElement.query(By.css('button'));
    const spy = spyOn(component, 'close');
    
    button.nativeElement.click();

    expect(spy).toHaveBeenCalled();
  });

  it('click reset button, calls reset', () => {
    const button = fixture.debugElement.query(By.css('#reset'));
    const spy = spyOn(component, 'reset');
    
    button.nativeElement.click();

    expect(spy).toHaveBeenCalled();
  });

  it('click save button, calls save', () => {
    const button = fixture.debugElement.query(By.css('#save'));
    const spy = spyOn(component, 'save');
    
    button.nativeElement.click();

    expect(spy).toHaveBeenCalled();
  });
});

export function menuScrollStrategy(overlay: Overlay): () => BlockScrollStrategy {
    return () => overlay.scrollStrategies.block();
}

constructor(
        private _vcr: ViewContainerRef,
        private _eventService: NgxMatTimepickerEventService,
        private _dialog: MatDialog,
        private _overlay: Overlay,
        private _domService: SmpDomService) {
    }

constructor(
        protected injector: Injector,
        protected overlay: Overlay,
        @Inject(MODAL_CONFIRM) protected confirmModal: Type<any>,
        @Inject(MODAL_PROMPT) protected promptModal: Type<any>
    ) {
    }

constructor(formBuilder: FormBuilder,
              private _overlay: Overlay,
              private _injector: Injector) {
    this.form = formBuilder.group({
      [OUTLET_NAME]: new FormControl(''),
    });
  }

constructor(
		private overlayPositionBuilder: OverlayPositionBuilder,
		private elementRef: ElementRef,
		private overlay: Overlay
	) {}

describe('NotificationsService', () => {
  let service: NotificationService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [NotificationService, MatSnackBar, Overlay]
    });
    service = TestBed.inject<NotificationService>(NotificationService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('default method should be executable', () => {
    spyOn(service, 'default');
    service.default('default message');
    expect(service.default).toHaveBeenCalled();
  });

  it('info method should be executable', () => {
    spyOn(service, 'info');
    service.info('info message');
    expect(service.info).toHaveBeenCalled();
  });

  it('success method should be executable', () => {
    spyOn(service, 'success');
    service.success('success message');
    expect(service.success).toHaveBeenCalled();
  });

  it('warning method should be executable', () => {
    spyOn(service, 'warn');
    service.warn('warning message');
    expect(service.warn).toHaveBeenCalled();
  });

  it('error method should be executable', () => {
    spyOn(service, 'error');
    service.error('error message');
    expect(service.error).toHaveBeenCalled();
  });
});

constructor(private bottomSheet: MatBottomSheet, private overlay: Overlay) {}

constructor(private ngZone: NgZone,
              private tutorialService: BdcWalkService,
              private __overlay: Overlay, private __elementRef: ElementRef<HTMLElement>, private __dir: Directionality,
              __viewContainerRef: ViewContainerRef, __focusMonitor: FocusMonitor,
              @Inject(MAT_MENU_SCROLL_STRATEGY) private __scrollStrategy) {

    super(__overlay, __elementRef, __viewContainerRef, __scrollStrategy, null, null, __dir, __focusMonitor);
  }

constructor(
    private overlay: Overlay,
    private overlayPositionBuilder: OverlayPositionBuilder,
    private elementRef: ElementRef,
    private utility: NpUtilityService
  ) { }

constructor(private readonly overlay: Overlay) {}

export function NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy {
  return () => overlay.scrollStrategies.reposition();
}

@NgModule({
  declarations: [
    AppComponent,
    ExpandableComponent,
    CanvasComponent,
    OpenComponent,
    OpenDialogComponent,
    SaveComponent,
    SaveDialogComponent,
    ExportComponent,
    ExportDialogComponent,
    UploadImageComponent,
    UploadImageDialogComponent,
    FormatterDirective,
    KeyboardNavigableDirective
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatCheckboxModule,
    MatMenuModule,
    MatTooltipModule,
    MatDialogModule,
    MatTableModule,
    MatSortModule,
    MatSliderModule,
    BrowserAnimationsModule,
    ScrollingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000'
    })
  ],
  providers: [{
    provide: MAT_TOOLTIP_SCROLL_STRATEGY,
    deps: [Overlay],
    useFactory(overlay: Overlay): () => ScrollStrategy {
      return () => overlay.scrollStrategies.close();
    }
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }

constructor(
    public overlay: Overlay,
    private viewContainerRef: ViewContainerRef,
    private overlayPositionBuilder: OverlayPositionBuilder,
    private elementRef: ElementRef
  ) { }

describe('BsFacetList', () => {
    let context: BsFacetList;
    let fixture: ComponentFixture<BsFacetList>;

    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            declarations: [BsFacetList, ValuePipe, NumberPipe],
            imports: [
                CommonModule,
                IntlModule.forRoot(AppLocalesConfig),
                BsFacetModule.forRoot()
            ],
            providers: [
                HttpHandler,
                FacetService,
                SearchService,
                LoginService,
                AuthenticationService,
                Overlay,
                ValuePipe,
                NumberPipe,
                {provide: Router, useClass: RouterStub},
                {provide: AuthService, useValue: {}},
                {provide: START_CONFIG, useValue: startConfig},
                {provide: MODAL_LOGIN, useValue: {}},
                {provide: MODAL_CONFIRM, useValue: {}},
                {provide: MODAL_PROMPT, useValue: {}},
            ]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(BsFacetList);
        context = fixture.debugElement.componentInstance;
    });

    it('should be created', () => {
        fixture.detectChanges();
        expect(context).toBeTruthy();
    });

    it('should display data', () => {
        // stub FacetService to returns mocked data
        const service = TestBed.inject(FacetService);
        spyOn(service, 'getAggregation').and.returnValue(AGGREGATION_GEO);
        spyOn(context, 'refreshFiltered').and.callThrough();

        // @Input()
        context.name = "Geo";
        context.results = RESULTS as any;
        context.searchItems.selected = true;

        expect(context.data()).toBeUndefined();
        expect(context.resultsLength).toEqual(0);
        expect(context.isHidden()).toBeTrue();

        context.ngOnChanges({results: {} as SimpleChange});
        fixture.detectChanges();

        // DOM expectations
        // - 11 rows
        // - no selected rows
        const DOM = fixture.nativeElement;
        expect(DOM.querySelectorAll(".facet-row").length).toEqual(11);
        expect(DOM.querySelectorAll(".list-group-item-primary").length).toEqual(0);

        // Components expectations
        expect(context.getName()).toEqual("Geo");
        expect(context.data()?.name).toEqual("Geo");
        expect(context.resultsLength).toEqual(11);
        expect(context.isHidden()).toBeFalse();

        expect(context.actions.length).toBeGreaterThan(0);
        expect(context.searchItems.selected).toBeFalse();
        expect(context.filtered.length).toEqual(0);
        expect(context.searchQuery.value).toEqual("");
        expect(context.noResults).toBeFalse();
        expect(context.suggestions$.getValue().length).toEqual(0);

        expect(context.refreshFiltered).toHaveBeenCalledTimes(1);
    });

    it("should mark an item selected on user's click", () => {
        // stub FacetService to returns mocked data
        const service = TestBed.inject(FacetService);
        spyOn(service, 'getAggregation').and.returnValue(AGGREGATION_CONCEPTS);
        spyOn(context, 'refreshFiltered').and.callThrough();
        spyOn(context, 'ngOnChanges').and.callThrough();
        spyOn(context, 'selectItem').and.callThrough();

        // @Input()
        context.name = 'Geo';
        context.results = RESULTS as any;
        context.searchItems.selected = true;

        // trigger manually an ngOnChanges's event
        context.ngOnChanges({results: {} as SimpleChange});
        fixture.detectChanges();

        // user's click on 4th row
        const el: HTMLElement | null = fixture.nativeElement.querySelectorAll("div.facet-row")[4];
        el?.click();

        fixture.detectChanges();

        // DOM expectations
        // - 4th row is selected
        // - only 1 row selected
        // - selected row's title has changed from "select" to "unselect"
        const selectedElements = fixture.nativeElement.querySelectorAll(".list-group-item-primary");

        expect(selectedElements.length).toEqual(1);
        expect(el?.classList).toContain("list-group-item-primary");
        expect(el?.title).toEqual("msg#facet.itemUnselect");

        // Component expectations
        expect(context.isSelected(context.items$.getValue()[4])).toBeTrue();
        expect(context.selected.length).toEqual(1);

        expect(context.selectItem).toHaveBeenCalledTimes(1);
        expect(context.ngOnChanges).toHaveBeenCalledTimes(1);
    })
});

public constructor(
    private _addonService: AddonService,
    private _addonProviderService: AddonProviderFactory,
    private _addonUiService: AddonUiService,
    private _sessionService: SessionService,
    private _dialog: MatDialog,
    private _dialogFactory: DialogFactory,
    private _cdRef: ChangeDetectorRef,
    private _wowUpAddonService: WowUpAddonService,
    private _translateService: TranslateService,
    private _snackbarService: SnackbarService,
    private _pushService: PushService,
    private _ngZone: NgZone,
    public electronService: ElectronService,
    public overlay: Overlay,
    public warcraftService: WarcraftService,
    public wowUpService: WowUpService,
    public warcraftInstallationService: WarcraftInstallationService,
    public relativeDurationPipe: RelativeDurationPipe
  ) {
    this.overlayNoRowsTemplate = `<span class="text-1 mat-h1">${
      _translateService.instant("COMMON.SEARCH.NO_ADDONS") as string
    }</span>`;

    this.wowInstallations$ = combineLatest([
      warcraftInstallationService.wowInstallations$,
      _addonService.anyUpdatesAvailable$,
    ]).pipe(switchMap(([installations]) => from(this.mapInstallations(installations))));

    this._sessionService.rescanComplete$
      .pipe(
        takeUntil(this._destroy$),
        switchMap(() => from(this.onRefresh())),
        catchError((err) => {
          console.error(err);
          return of(undefined);
        })
      )
      .subscribe();

    const addonInstalledSub = this._addonService.addonInstalled$
      .pipe(
        map((evt) => this.onAddonInstalledEvent(evt)),
        map(() => this.setPageContextText())
      )
      .subscribe();

    const addonRemovedSub = this._addonService.addonRemoved$
      .pipe(
        map((evt) => this.onAddonRemoved(evt)),
        map(() => this.setPageContextText())
      )
      .subscribe();

    // If an update push comes in, check if we have any addons installed with any of the ids, if so refresh
    const pushUpdateSub = this._pushService.addonUpdate$
      .pipe(
        debounceTime(5000),
        switchMap((addons) => {
          const addonIds = addons.map((addon) => addon.addonId);
          return from(this._addonService.hasAnyWithExternalAddonIds(addonIds));
        }),
        filter((hasAny) => hasAny),
        switchMap(() => from(this.onRefresh()))
      )
      .subscribe();

    this._subscriptions.push(
      this.isSelectedTab$
        .pipe(
          filter((isSelected) => isSelected === true),
          switchMap(this.onSelectedTabChange)
        )
        .subscribe(),
      this._sessionService.addonsChanged$.pipe(switchMap(() => from(this.onRefresh()))).subscribe(),
      this._sessionService.targetFileInstallComplete$.pipe(switchMap(() => from(this.onRefresh()))).subscribe(),
      pushUpdateSub,
      addonInstalledSub,
      addonRemovedSub
    );

    this.frameworkComponents = {
      myAddonRenderer: MyAddonsAddonCellComponent,
      myAddonStatus: MyAddonStatusCellComponent,
      contextHeader: TableContextHeaderCellComponent,
      wrapTextCell: CellWrapTextComponent,
      dateTooltipCell: DateTooltipCellComponent,
    };

    this.columnDefs$.next(this.createColumns());
  }