How to use @nebular/theme - 10 common examples

contextProperty;

  isFirstOnChangesCall = true;
  contextPropertyValueOnFirstCdRun;
  ngOnInit() {
    if (this.isFirstOnChangesCall) {
      this.contextPropertyValueOnFirstCdRun = this.contextProperty;
      this.isFirstOnChangesCall = false;
    }
  }
}

// Has to define test module since there is no way to specify entry components
// in 'TestBed.configureTestingModule'.
@NgModule({
  imports: [ NbOverlayModule.forRoot() ],
  declarations: [ NbOverlayContainerTestComponent, NbOverlayTestComponent ],
  entryComponents: [ NbOverlayTestComponent ],
})
export class NbOverlayTestModule {}

describe('NbOverlayContainerComponent', () => {
  let fixture: ComponentFixture;
  let overlayContainer: NbOverlayContainerComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [ NbOverlayTestModule ] });

    fixture = TestBed.createComponent(NbOverlayContainerTestComponent);
    fixture.detectChanges();
    overlayContainer = fixture.componentInstance.overlayContainer;
  });

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        NbThemeModule.forRoot(),
        NbOverlayModule.forRoot(),
        NbLayoutModule,
        PortalModule,
        RouterTestingModule.withRoutes([]),
      ],
    });

    // Have to create layout component as it's required for scroll service to work properly.
    // Also it registers overlay container so we don't have to create it manually.
    TestBed.createComponent(NbLayoutComponent);

    overlayHostElement = document.createElement('div');
    overlayHostElement.style.width = '10px';
    overlayHostElement.style.height = '10px';
    overlayHostElement.style.backgroundColor = 'red';
    document.body.appendChild(overlayHostElement);

ConfirmDeleteComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    NbEvaIconsModule,
    NbSidebarModule.forRoot(), // NbSidebarModule.forRoot(), //if this is your app.module
    NbButtonModule,
    NbActionsModule,
    NbSearchModule,
    NbIconModule,
    NbMenuModule.forRoot(),
    NbTooltipModule,
    NbCardModule,
    NbInputModule,
    NbCheckboxModule,
    NbSelectModule,
    NbDialogModule.forRoot(),
    NgxMaskModule.forRoot(),
    NbToastrModule.forRoot(),

loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    NbEvaIconsModule,
    NbSidebarModule.forRoot(), // NbSidebarModule.forRoot(), //if this is your app.module
    NbButtonModule,
    NbActionsModule,
    NbSearchModule,
    NbIconModule,
    NbMenuModule.forRoot(),
    NbTooltipModule,
    NbCardModule,
    NbInputModule,
    NbCheckboxModule,
    NbSelectModule,
    NbDialogModule.forRoot(),
    NgxMaskModule.forRoot(),
    NbToastrModule.forRoot(),
    ReactiveFormsModule,
    NbAlertModule,
    FormlyModule.forRoot(),
    NbDatepickerModule.forRoot(),
    FormlyBootstrapModule,
    Ng2FittextModule,
    NgBootstrapFormValidationModule.forRoot(),
  ],

BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    NbEvaIconsModule,
    NbSidebarModule.forRoot(), // NbSidebarModule.forRoot(), //if this is your app.module
    NbButtonModule,
    NbActionsModule,
    NbSearchModule,
    NbIconModule,
    NbMenuModule.forRoot(),
    NbTooltipModule,
    NbCardModule,
    NbInputModule,
    NbCheckboxModule,
    NbSelectModule,
    NbDialogModule.forRoot(),
    NgxMaskModule.forRoot(),
    NbToastrModule.forRoot(),
    ReactiveFormsModule,
    NbAlertModule,
    FormlyModule.forRoot(),

BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    NbEvaIconsModule,
    NbSidebarModule.forRoot(), // NbSidebarModule.forRoot(), //if this is your app.module
    NbButtonModule,
    NbActionsModule,
    NbSearchModule,
    NbIconModule,
    NbMenuModule.forRoot(),
    NbTooltipModule,
    NbCardModule,
    NbInputModule,
    NbCheckboxModule,
    NbSelectModule,
    NbDialogModule.forRoot(),
    NgxMaskModule.forRoot(),
    NbToastrModule.forRoot(),
    ReactiveFormsModule,
    NbAlertModule,
    FormlyModule.forRoot(),
    NbDatepickerModule.forRoot(),
    FormlyBootstrapModule,
    Ng2FittextModule,
    NgBootstrapFormValidationModule.forRoot(),
  ],
  providers: [
    ElectronService, 
    NbMenuService, 
    NbDialogService, 
    AccountsService, 
    NbDatepickerDirective,

NbLayoutModule,
    NbEvaIconsModule,
    NbSidebarModule.forRoot(), // NbSidebarModule.forRoot(), //if this is your app.module
    NbButtonModule,
    NbActionsModule,
    NbSearchModule,
    NbIconModule,
    NbMenuModule.forRoot(),
    NbTooltipModule,
    NbCardModule,
    NbInputModule,
    NbCheckboxModule,
    NbSelectModule,
    NbDialogModule.forRoot(),
    NgxMaskModule.forRoot(),
    NbToastrModule.forRoot(),
    ReactiveFormsModule,
    NbAlertModule,
    FormlyModule.forRoot(),
    NbDatepickerModule.forRoot(),
    FormlyBootstrapModule,
    Ng2FittextModule,
    NgBootstrapFormValidationModule.forRoot(),
  ],
  providers: [
    ElectronService, 
    NbMenuService, 
    NbDialogService, 
    AccountsService, 
    NbDatepickerDirective,
    {
      provide: ErrorHandler,

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        NbThemeModule.forRoot(),
        NbOverlayModule.forRoot(),
        NbLayoutModule,
        PortalModule,
        RouterTestingModule.withRoutes([]),
      ],
    });

    // Have to create layout component as it's required for scroll service to work properly.
    // Also it registers overlay container so we don't have to create it manually.
    TestBed.createComponent(NbLayoutComponent);

    overlayHostElement = document.createElement('div');
    overlayHostElement.style.width = '10px';
    overlayHostElement.style.height = '10px';
    overlayHostElement.style.backgroundColor = 'red';
    document.body.appendChild(overlayHostElement);

it('should map right position to end', () => {
    const withPositionsSpy = spyOn(strategy, 'withPositions').and.callThrough();

    strategy.position(NbPosition.RIGHT).adjustment(NbAdjustment.HORIZONTAL);

    const overlayService: NbOverlayService = TestBed.get(NbOverlayService);
    const overlayRef = overlayService.create({ positionStrategy: strategy });
    overlayRef.attach(new NbComponentPortal(PortalComponent));

    expect(withPositionsSpy).toHaveBeenCalledWith(jasmine.objectContaining([
      { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 15 },
      { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -15 },
    ]));
  });
});

it('should set context before change detection run', () => {
    const context = { contextProperty: 'contextProperty' };
    const portal: NbComponentPortal = new NbComponentPortal(NbOverlayTestComponent);
    const portalRef = overlayContainer.attachComponentPortal(portal, context);

    expect(portalRef.instance.contextPropertyValueOnFirstCdRun).toEqual(context.contextProperty);
  });
});