@angular/cdk/portal#PortalModule TypeScript Examples

@NgModule({
  declarations: [NpAutoCompleteComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpOrderByModule,
    NpHighlightModule,
    NpTranslationsModule,
  ],
  exports: [NpAutoCompleteComponent],
})
export class NpAutoCompleteModule { }

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    FlexLayoutModule,
    LayoutModule,
    OverlayModule,
    PortalModule,
    DragDropModule,
    ReactiveFormsModule,
    HttpClientModule,
    MaterialComponentsModule
  ],
  exports: [
    CommonModule,
    FormsModule,
    FlexLayoutModule,
    LayoutModule,
    OverlayModule,
    PortalModule,
    DragDropModule,
    ReactiveFormsModule,
    HttpClientModule,
    MaterialComponentsModule
  ]
})
export class SharedModule {}

@NgModule({
  declarations: [NpTimePickerComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpTranslationsModule,
  ],
  exports: [NpTimePickerComponent],
})
export class NpTimePickerModule { }

@NgModule({
  declarations: [NpTagsComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpTranslationsModule,
    NpOrderByModule,
    NpHighlightModule,
  ],
  exports: [NpTagsComponent],
})
export class NpTagsModule { }

@NgModule({
  declarations: [NpDropdownComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpOrderByModule,
  ],
  exports: [NpDropdownComponent],
})
export class NpDropdownModule { }

@NgModule({
  declarations: [NpDialogContainerComponent],
  imports: [
    CommonModule,
    FormsModule,
    OverlayModule,
    PortalModule,
    NpTranslationsModule,
    NpAutofocusModule,
  ],
  exports: [NpDialogContainerComponent],
  entryComponents: [NpDialogContainerComponent],
  providers: [NpDialogService],
})
export class NpDialogModule { }

@NgModule({
  declarations: [NpDatePickerComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpTooltipModule,
    NpAutofocusModule,
    NpTranslationsModule,
  ],
  exports: [NpDatePickerComponent],
})
export class NpDatePickerModule { }

@NgModule({
  declarations: [NpDataGridComponent, NpFilterTypesPipe, NpSearchColumnsPipe],
  imports: [
    CommonModule,
    FormsModule,
    DragDropModule,
    OverlayModule,
    PortalModule,
    NpDatePickerModule,
    NpDialogModule,
    NpPaginatorModule,
    NpCheckboxModule,
    NpTranslationsModule,
  ],
  exports: [NpDataGridComponent],
  providers: [
    NpFilterService,
    NpGridUtilityService,
    NpODataService,
    NpFileService,
  ],
})
export class NpDataGridModule { }

@NgModule({
  declarations: [NpColorPickerComponent],
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    NpAutofocusModule,
    NpTranslationsModule,
  ],
  exports: [NpColorPickerComponent],
})
export class NpColorPickerModule { }

@NgModule({
  imports: [
    CommonModule,
    OverlayModule,
    PortalModule,
    IconModule,
    ButtonModule,
  ],
  declarations: [
    DialogComponent,
    DialogHeaderComponent,
    DialogContentComponent,
    DialogFooterComponent,
    DialogCloseDirective,
    ConfirmDialogComponent,
  ],
  exports: [
    DialogComponent,
    DialogHeaderComponent,
    DialogContentComponent,
    DialogFooterComponent,
    DialogCloseDirective,
  ],
  entryComponents: [DialogComponent, ConfirmDialogComponent],
  providers: [DialogService],
})
export class DialogModule {}

@NgModule({
  declarations: [
    NpAccordionComponent,
    NpAccordionItemComponent,
    NpAccordionContent,
  ],
  imports: [CommonModule, PortalModule],
  exports: [NpAccordionComponent, NpAccordionItemComponent, NpAccordionContent],
})
export class NpAccordionModule { }

@NgModule({
  declarations: [StepComponent, StepOneComponent, StepTwoComponent, StepThreeComponent],
    imports: [
        SharedModule,
        StepRoutingModule,
        PortalModule,
    ]
})
export class StepModule {
}

@NgModule({
  declarations: [
    NgxMatColorPaletteComponent,
    NgxMatColorCanvasComponent,
    NgxMatColorCollectionComponent,
    NgxMatColorSliderComponent,
    NumericColorInputDirective,
    NgxMatColorPickerContentComponent,
    NgxMatColorPickerComponent,
    NgxMatColorToggleComponent,
    NgxMatColorPickerInput
  ],
  imports: [
    CommonModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatRadioModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
    PortalModule,
    MatIconModule
  ],
  exports: [
    NgxMatColorToggleComponent,
    NgxMatColorPickerInput,
    NgxMatColorPickerComponent
  ],
  entryComponents: [
    NgxMatColorPickerContentComponent
  ],
  providers: [
    ColorAdapter,
    NGX_MAT_COLOR_PICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
  ]
})
export class NgxMatColorPickerModule { }

@NgModule({
  declarations: [    
    TabbedSectionComponent
    ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    CommonModule,
    PortalModule,
    DynamicModule,
    MatTabsModule,
    MatIconModule,
    DxcTabbedSectionModule
  ],
  exports: [
    TabbedSectionComponent
  ],
  entryComponents: [
    DynamicComponentComponent
  ]
})
export class TabbedSectionModule {}

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule,
    PortalModule,
    OverlayModule,
    CommonModule,
    InputModule,
    TooltipModule,
    IconModule,
    ButtonModule,
    I18nModule,
  ],
  declarations: [TimePickerComponent, TimePickerPanelComponent],
  exports: [TimePickerComponent, TimePickerPanelComponent],
})
export class TimePickerModule {}

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    PortalModule,
    ButtonModule,
    IconModule,
    A11yModule,
    ObserversModule,
  ],
  declarations: [
    TabGroupComponent,
    TabComponent,
    TabLabelDirective,
    TabContentDirective,
    TabHeaderAddonDirective,
    TabTitleDirective,
    TabHeaderComponent,
    TabBodyComponent,
    TabBodyPortalDirective,
    TabLabelWrapperDirective,
    TabHeaderActiveIndicatorComponent,
  ],
  exports: [
    TabGroupComponent,
    TabComponent,
    TabLabelDirective,
    TabContentDirective,
    TabHeaderAddonDirective,
    TabTitleDirective,
    TabLabelWrapperDirective,
    TabHeaderComponent,
  ],
})
export class TabsModule {}

@NgModule({
  declarations: [
    EchartsComponent,
    StartedComponent,
    AdvancedComponent,
    SeriesComponent,
    SimpleChartComponent,
    EventsChartsComponent,
    ThemeChartsComponent,
    LoadingChartsComponent,
    MergeChartsComponent,
    InitOptsChartsComponent,
    InstanceOptsChartsComponent,
    ConnectChartsComponent,
    DraggableChartsComponent,
    SimpleGraphComponent,
    FromLeftToRightComponent,
    RadialTreeComponent,
  ],
  imports: [
    SharedModule,
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    }),
    EchartsRoutingModule,
    PortalModule
  ]
})
export class EchartsModule { }

@NgModule({
  declarations: [NpModalContainerComponent],
  imports: [CommonModule, OverlayModule, PortalModule],
  exports: [NpModalContainerComponent],
  entryComponents: [NpModalContainerComponent],
  providers: [NpModalService],
})
export class NpModalModule { }

@NgModule({
  imports: [CommonModule, IconModule, IconModule, OverlayModule, PortalModule],
  declarations: COMMON,
  exports: COMMON,
  entryComponents: [DrawerComponent],
  providers: [DrawerService],
})
export class DrawerModule {}

@NgModule({
    imports: [
        CommonModule,
        A11yModule,
        FormsModule,
        MatButtonModule,
        MatFormFieldModule,
        MatDialogModule,
        MatInputModule,
        MatSelectModule,
        MatToolbarModule,
        MatIconModule,
        OverlayModule,
        PortalModule,
        SmpCoreUtilsModule.forRoot()
    ],
    exports: [
        NgxMatTimepickerComponent,
        NgxMatTimepickerToggleComponent,
        NgxMatTimepickerFieldComponent,
        NgxMatTimepickerDirective,
        NgxMatTimepickerToggleIconDirective
    ],
    declarations: [
        // Not really used, but needed to use it as abstract class
        NgxMatTimepickerBaseDirective,
        NgxMatTimepickerHoursFaceDirective,
        //
        NgxMatTimepickerActiveHourPipe,
        NgxMatTimepickerActiveMinutePipe,
        NgxMatTimepickerComponent,
        NgxMatTimepickerDialComponent,
        NgxMatTimepickerDialControlComponent,
        NgxMatTimepickerDialogComponent,
        NgxMatTimepickerDirective,
        NgxMatTimepickerFaceComponent,
        NgxMatTimepickerMinutesFaceComponent,
        NgxMatTimepickerPeriodComponent,
        NgxMatTimepickerStandaloneComponent,
        NgxMatTimepickerToggleComponent,
        NgxMatTimepicker12HoursFaceComponent,
        NgxMatTimepicker24HoursFaceComponent,
        NgxMatTimepickerToggleIconDirective,
        NgxMatTimepickerAutofocusDirective,
        NgxMatTimepickerMinutesFormatterPipe,
        NgxMatTimepickerThemeDirective,
        NgxMatTimepickerFieldComponent,
        NgxMatTimepickerControlComponent,
        NgxMatTimepickerParserPipe,
        NgxMatTimepickerContentComponent,
        NgxMatTimepickerTimeFormatterPipe,
        NgxMatTimepickerTimeLocalizerPipe
    ],
    entryComponents: [
        NgxMatTimepickerDialogComponent,
        NgxMatTimepickerStandaloneComponent
    ]
})
export class NgxMatTimepickerModule {

    static setLocale(locale: string): ModuleWithProviders<NgxMatTimepickerModule> {
        return {
            ngModule: NgxMatTimepickerModule,
            providers: [
                {provide: NGX_MAT_TIMEPICKER_LOCALE, useValue: locale},
                {provide: NGX_MAT_TIMEPICKER_CONFIG, useValue: undefined},
            ]
        };
    }
}

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule {}

@NgModule({
  imports: [CommonModule, OverlayModule, PortalModule, IconModule],
  declarations: [NotificationWrapperComponent, NotificationComponent],
  entryComponents: [NotificationWrapperComponent, NotificationComponent],
  providers: [NotificationService],
})
export class NotificationModule {}

describe('TabHeaderComponent', () => {
  const change = new Subject();
  let fixture: ComponentFixture<SimpleTabHeaderAppComponent>;
  let appComponent: SimpleTabHeaderAppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [CommonModule, PortalModule, IconModule],
      declarations: [
        TabHeaderComponent,
        TabHeaderActiveIndicatorComponent,
        TabLabelWrapperDirective,
        SimpleTabHeaderAppComponent,
      ],
      providers: [
        ViewportRuler,
        {
          provide: Directionality,
          useFactory: () => ({ value: 'ltr', change: change.asObservable() }),
        },
      ],
    });
  });

  describe('pagination', () => {
    beforeEach(() => {
      fixture = TestBed.createComponent(SimpleTabHeaderAppComponent);
      fixture.detectChanges();
      appComponent = fixture.componentInstance;
    });

    // FIXME: looks like JSDom does not work properly with offsetWidth?
    // eslint-disable-next-line jest/no-disabled-tests
    it.skip('should show width when tab list width exceeds container', () => {
      fixture.detectChanges();
      expect(appComponent.tabHeader._showPaginationControls).toBe(false);

      // Add enough tabs that it will obviously exceed the width
      appComponent.addTabsForScrolling();
      fixture.detectChanges();

      fixture.detectChanges();

      expect(appComponent.tabHeader._showPaginationControls).toBe(true);
    });
  });
});

@NgModule({
  declarations: [NpTabsComponent, NpTabComponent, NpTabContent],
  imports: [CommonModule, PortalModule],
  exports: [NpTabsComponent, NpTabComponent, NpTabContent],
})
export class NpTabsModule { }

@NgModule({
  declarations: [NpSidepanelComponent, NpSidepanelContent],
  imports: [CommonModule, PortalModule],
  exports: [NpSidepanelComponent, NpSidepanelContent],
})
export class NpSidepanelModule { }

@NgModule({
  declarations: [NpPanelComponent, NpPanelContent],
  imports: [CommonModule, PortalModule],
  exports: [NpPanelComponent, NpPanelContent],
})
export class NpPanelModule { }

@NgModule({
  declarations: [DynamicComponentComponent],
  imports: [BrowserModule, FormsModule, PortalModule],
  exports: [DynamicComponentComponent],
  entryComponents: [],
})
export class DynamicModule {}

@NgModule({
  declarations: [ThemeBuilderDynamicComponentComponent],
  imports: [CommonModule, FormsModule, PortalModule],
  exports: [ThemeBuilderDynamicComponentComponent],
  entryComponents: [],
})
export class ThemeBuilderDynamicModule {}

@NgModule({
   imports: [
      CommonModule,
      MatDatepickerModule,
      MatDialogModule,
      PortalModule,
      FormsModule,
      MatIconModule,
      MatButtonModule,
      MatInputModule,
      NgxMatTimepickerModule
   ],
   exports: [
      NgxMatDatetimePicker,
      NgxMatDatetimeInput,
      NgxMatCalendar,
      NgxMatMonthView,
      NgxMatYearView,
      NgxMatMultiYearView,
      NgxMatCalendarHeader
   ],
   declarations: [
      NgxMatDatetimePicker,
      NgxMatDatetimeContent,
      NgxMatDatetimeInput,
      NgxMatCalendar,
      NgxMatMonthView,
      NgxMatYearView,
      NgxMatMultiYearView,
      NgxMatCalendarHeader
   ],
   entryComponents: [
      NgxMatDatetimeContent,
      NgxMatCalendarHeader
   ],
   providers: [
      MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER
   ]
})
export class NgxMatDatetimePickerModule { }