@angular/material/slider#MatSliderModule TypeScript Examples

The following examples show how to use @angular/material/slider#MatSliderModule. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: app.module.ts From Collab-Blog with GNU General Public License v3.0

6 votes

@NgModule({
  declarations: [
    AppComponent,
    BlogListComponent,
    AddBlogComponent,
    NavbarComponent,
    WelcomePageComponent,
    ViewBlogComponent,
    UpdateBlogComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatListModule,
    MatToolbarModule,
    MatSliderModule,
    MatMenuModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #2

Source File: material.module.ts From WiLearning with GNU Affero General Public License v3.0

6 votes

@NgModule({
  exports: [
    MatSelectModule,
    MatAutocompleteModule,
    MatCardModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatDialogModule,
    MatGridListModule,
    MatIconModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatRadioModule,
    MatInputModule,
    MatRippleModule,
    MatDividerModule,
    MatExpansionModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatBadgeModule
  ]
})
export class MaterialComponentsModule {}

Example #3

Source File: app.module.ts From testube with GNU General Public License v3.0

6 votes

@NgModule({
  declarations: [
    AppComponent,
    DashComponent,
    AboutComponent,
    ToolbarComponent,
    FooterComponent,
    LogoComponent,
    CardComponent,
    DonateComponent,
    DebugComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatCardModule,
    MatSnackBarModule,
    MatFormFieldModule,
    MatInputModule,
    MatSliderModule,
    FormsModule,
    MatTooltipModule,
    MatIconModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #4

Source File: app.module.ts From angular-9-coronavirus-cases-app with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    CasesComponent,
    CasesDetailsComponent,
    AddCasesComponent,
    EditCasesComponent,
    CasesStatComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    MatSortModule,
    MatTableModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatButtonToggleModule,
    MatSelectModule,
    ChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #5

Source File: material-module.ts From 6PG-Dashboard with MIT License

6 votes

@NgModule({
  exports: [
    ColorPickerModule,
    CdkTableModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatCheckboxModule,
    MatInputModule,
    MatIconModule,
    MatTableModule,
    MatPaginatorModule,
    MatRippleModule,
    MatSortModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSelectModule,
    MatSnackBarModule,
    MatTooltipModule
  ]
})
export class MaterialModule {}

Example #6

Source File: material.module.ts From capture-lite with GNU General Public License v3.0

6 votes

modules = [
  MatCheckboxModule,
  MatButtonModule,
  MatInputModule,
  MatAutocompleteModule,
  MatDatepickerModule,
  MatFormFieldModule,
  MatRadioModule,
  MatSelectModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatMenuModule,
  MatSidenavModule,
  MatToolbarModule,
  MatListModule,
  MatGridListModule,
  MatCardModule,
  MatStepperModule,
  MatTabsModule,
  MatExpansionModule,
  MatButtonToggleModule,
  MatChipsModule,
  MatIconModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatDialogModule,
  MatTooltipModule,
  MatSnackBarModule,
  MatTableModule,
  MatSortModule,
  MatPaginatorModule,
  MatBadgeModule,
  MatBottomSheetModule,
]

Example #7

Source File: topology_graph_module.ts From profiler with Apache License 2.0

6 votes

/** A topology graph view module. */
@NgModule({
  declarations: [TopologyGraph],
  imports: [
    CommonModule,
    MatButtonModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatSliderModule,
  ],
  exports: [TopologyGraph]
})
export class TopologyGraphModule {
}

Example #8

Source File: pod_viewer_module.ts From profiler with Apache License 2.0

6 votes

/** A pod viewer module. */
@NgModule({
  declarations: [PodViewer],
  imports: [
    CommonModule,
    DiagnosticsViewModule,
    MatDividerModule,
    MatSliderModule,
    StackBarChartModule,
    TopologyGraphModule,
  ],
  exports: [PodViewer]
})
export class PodViewerModule {
}

Example #9

Source File: custom-material.module.ts From ledge with Mozilla Public License 2.0

6 votes

modules = [
  MatToolbarModule,
  MatButtonModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatSliderModule,
  MatSidenavModule,
  MatIconModule,
  MatDialogModule,
  MatCardModule,
  MatInputModule,
  MatTooltipModule,
  MatTabsModule,
  MatSelectModule,
  MatFormFieldModule,

  ScrollingModule,
]

Example #10

Source File: op_profile_module.ts From profiler with Apache License 2.0

6 votes

/** An op profile module. */
@NgModule({
  declarations: [OpProfile],
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatSliderModule,
    MatSlideToggleModule,
    OpTableModule,
    MatIconModule,
    MatTooltipModule,
  ],
  exports: [OpProfile]
})
export class OpProfileModule {
}

Example #11

Source File: kernel_stats_chart_module.ts From profiler with Apache License 2.0

6 votes

@NgModule({
  declarations: [KernelStatsChart],
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatSliderModule,
  ],
  exports: [KernelStatsChart]
})
export class KernelStatsChartModule {
}

Example #12

Source File: qd-messages-ts.module.ts From qd-messages-ts with GNU Affero General Public License v3.0

5 votes

@NgModule({
  declarations: [

    QDMessagesComponent,
    ChannelComponent,
    MatMenuComponent,

    FsIconComponent,
    ChannelListComponent,
    ChannelSidebarRightComponent,
    ChannelSidebarLeftComponent,
    ChannelParticipantListComponent,
    ChannelSettingsComponent,
    ChannelTabComponent,
    ChannelFavoritesComponent
  ],
  imports: [
  NbSidebarModule,
    CdkTableModule,
    CdkTreeModule,
    NbMenuModule,
    ClipboardModule,
    HttpClientModule,
    MatCardModule,
    MatSelectModule,
    MatButtonModule,
    MatCheckboxModule,
    MatMenuModule,
    CommonModule,
    QuestMessengerJSRoutingModule,
    FontAwesomeModule,
    NbThemeModule,
    NbLayoutModule,
    NbChatModule,
    NbTabsetModule,
    NbEvaIconsModule,
    NbIconModule,
    FormsModule,
    NbContextMenuModule,
    NbDialogModule.forRoot(),
    NbCardModule,
    MatTreeModule,
    DragDropModule,
    MatButtonModule,
   MatCheckboxModule,
   MatInputModule,
   MatFormFieldModule,
   ZXingScannerModule,
   MatSliderModule,
   FlexLayoutModule,
   MatIconModule,
   LinkyModule


  ],
  exports: [
    QDMessagesComponent,
    CdkTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatTreeModule,
    MatMenuModule,
    ],
  providers: [
  NbDialogService
  ],
  bootstrap: [QDMessagesComponent]
})
export class QDMessagesModule { }

Example #13

Source File: shared.module.ts From FlexDemo with MIT License

5 votes

@NgModule({
  imports: [
    CommonModule,


    // Navigation
    MatMenuModule, MatSidenavModule, MatToolbarModule,

    // FormControls
    MatAutocompleteModule, MatCheckboxModule, MatDatepickerModule, MatInputModule,
    MatFormFieldModule, MatRadioModule, MatSelectModule, MatSliderModule,
    MatSlideToggleModule, MatSelectModule,
    // Layout
    MatCardModule, MatDividerModule, MatExpansionModule, MatGridListModule,
    MatListModule, MatStepperModule, MatTabsModule, MatTreeModule,
    // Buttons
    MatButtonModule, MatButtonToggleModule, MatBadgeModule, MatChipsModule,
    MatIconModule, MatProgressSpinnerModule, MatProgressBarModule, MatRippleModule,

    // Popups & Modals
    MatBottomSheetModule, MatDialogModule, MatSnackBarModule, MatTooltipModule,

    // Datatable
    MatTableModule, MatSortModule, MatPaginatorModule,

    FlexGridModule
  ],
  exports: [
    // CommonModule,

    // // Navigation
    // MatMenuModule, MatSidenavModule, MatToolbarModule,

    // // FormControls
    // MatAutocompleteModule, MatCheckboxModule, MatDatepickerModule, 
    MatInputModule,
    MatFormFieldModule, // MatRadioModule, MatSelectModule, MatSliderModule,
    // MatSlideToggleModule, MatSelectModule,
    // // Layout
    MatCardModule,
    MatDividerModule,
    // MatExpansionModule, MatGridListModule,
    // MatListModule, MatStepperModule, MatTabsModule, MatTreeModule,
    // Buttons
    MatButtonModule,
    // MatButtonToggleModule,
    MatBadgeModule, MatChipsModule,
    //
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule, MatRippleModule,

    // Popups & Modals
    // MatBottomSheetModule, MatDialogModule, MatSnackBarModule, 
    MatTooltipModule,

    // Datatable
    MatTableModule, MatSortModule, MatPaginatorModule,

    FlexGridModule

  ],
  declarations: []
})
export class SharedModule { }

Example #14

Source File: shared-material.module.ts From matx-angular with MIT License

5 votes

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

Example #15

Source File: app.module.ts From tuxedo-control-center with GNU General Public License v3.0

5 votes

@NgModule({
  declarations: [
    AppComponent,
    ProfileManagerComponent,
    SupportComponent,
    ProfileOverviewTileComponent,
    ProfileDetailsEditComponent,
    InfoComponent,
    CpuDashboardComponent,
    GlobalSettingsComponent,
    ShutdownTimerComponent,
    ToolsComponent,
    ChangeCryptPasswordComponent,
    FanGraphComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxElectronModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatIconModule,
    MatTableModule,
    MatFormFieldModule,
    MatSelectModule,
    MatButtonModule,
    MatCardModule,
    MatChipsModule,
    MatExpansionModule,
    MatInputModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatDividerModule,
    MatSliderModule,
    MatGridListModule,
    MatStepperModule,
    MatButtonToggleModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MarkdownModule.forRoot(),
    OverlayModule,
    GaugeModule.forRoot(),
    ChartsModule
  ],
  providers: [
    DecimalPipe,
    ThemeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #16

Source File: range_slider_module.ts From profiler with Apache License 2.0

5 votes

/** A range slider component module. */
@NgModule({
  declarations: [RangeSlider],
  imports: [MatSliderModule],
  exports: [RangeSlider]
})
export class RangeSliderModule {
}

Example #17

Source File: material.module.ts From ngSurvey with MIT License

5 votes

@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 {}

Example #18

Source File: material.module.ts From open-genes-frontend with Mozilla Public License 2.0

5 votes

@NgModule({
  imports: [
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatBottomSheetModule,
    MatBadgeModule,
    MatRippleModule,
  ],
  exports: [
    MatCheckboxModule,
    MatButtonModule,
    MatInputModule,
    MatAutocompleteModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatRadioModule,
    MatSelectModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatMenuModule,
    MatSidenavModule,
    MatToolbarModule,
    MatListModule,
    MatGridListModule,
    MatCardModule,
    MatStepperModule,
    MatTabsModule,
    MatExpansionModule,
    MatButtonToggleModule,
    MatChipsModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatDialogModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatBottomSheetModule,
    MatBadgeModule,
  ],
})
export class MaterialModule {}

Example #19

Source File: dxc-slider.module.ts From halstack-angular with Apache License 2.0

5 votes

@NgModule({
  declarations: [DxcSliderComponent],
  imports: [CommonModule, MatSliderModule, FormsModule, DxcTextInputModule],
  exports: [DxcSliderComponent],
})
export class DxcSliderModule {}

Example #20

Source File: app.module.ts From svg-path-editor with Apache License 2.0

5 votes

@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 { }

Example #21

Source File: mat-module.ts From WowUp with GNU General Public License v3.0

5 votes

@NgModule({
  exports: [
    MatSliderModule,
    MatTabsModule,
    MatSelectModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    MatInputModule,
    MatIconModule,
    MatSlideToggleModule,
    MatProgressBarModule,
    MatCheckboxModule,
    MatDividerModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatRadioModule,
    MatTooltipModule,
    MatDialogModule,
    MatCardModule,
    MatSnackBarModule,
    MatSidenavModule,
    MatListModule,
    MatBadgeModule,
    ClipboardModule,
    ScrollingModule,
    MatGridListModule,
    MatExpansionModule,
  ],
  imports: [
    MatSliderModule,
    MatTabsModule,
    MatSelectModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    MatInputModule,
    MatIconModule,
    MatSlideToggleModule,
    MatProgressBarModule,
    MatCheckboxModule,
    MatDividerModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatRadioModule,
    MatTooltipModule,
    MatDialogModule,
    MatCardModule,
    MatSnackBarModule,
    MatSidenavModule,
    MatListModule,
    MatBadgeModule,
    ClipboardModule,
    ScrollingModule,
    MatGridListModule,
    MatExpansionModule,
  ],
})
export class MatModule {}

Example #22

Source File: shared.module.ts From enterprise-ng-2020-workshop with MIT License

4 votes

@NgModule({
  imports: [
    CommonModule,
    FormsModule,

    TranslateModule,

    MatButtonModule,
    MatSelectModule,
    MatTabsModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatChipsModule,
    MatCardModule,
    MatCheckboxModule,
    MatListModule,
    MatMenuModule,
    MatIconModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatDividerModule,

    FontAwesomeModule
  ],
  declarations: [
    BigInputComponent,
    BigInputActionComponent,
    RtlSupportDirective
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,

    TranslateModule,

    MatButtonModule,
    MatMenuModule,
    MatTabsModule,
    MatChipsModule,
    MatInputModule,
    MatProgressSpinnerModule,
    MatCheckboxModule,
    MatCardModule,
    MatListModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatDividerModule,
    MatSliderModule,
    MatDatepickerModule,
    MatNativeDateModule,

    FontAwesomeModule,

    BigInputComponent,
    BigInputActionComponent,
    RtlSupportDirective
  ]
})
export class SharedModule {
  constructor(faIconLibrary: FaIconLibrary) {
    faIconLibrary.addIcons(
      faGithub,
      faMediumM,
      faPlus,
      faEdit,
      faTrash,
      faTimes,
      faCaretUp,
      faCaretDown,
      faExclamationTriangle,
      faFilter,
      faTasks,
      faCheck,
      faSquare,
      faLanguage,
      faPaintBrush,
      faLightbulb,
      faWindowMaximize,
      faStream,
      faBook
    );
  }
}

Example #23

Source File: app.module.ts From nuxx with GNU Affero General Public License v3.0

4 votes

@NgModule({
  declarations: [
    AppComponent,
    RepoSearchComponent,
    DialogDetails,
    DialogAddCustom,
    HeaderComponent,
    CodeViewComponent,
    CanvasComponent,
    HomeComponent,
    ManageProjectDialogComponent,
    ManageVolumesDialogComponent,
    SpinnerComponent,
    CheckCircleComponent,
    ConfirmDialogComponent,
    NodeComponent,
    MarkedPipe,
    TruncateTextPipe,
    KeyValueComponent,
    ManageNetworksDialogComponent,
    SideBarComponent,
    LoginComponent,
    RegistrationComponent,
    ManageUserDialogComponent,
    CallbackComponent,
    ImportDialogComponent,
    GlobalDialogComponent,
    RecipeComponent,
    DialogPublishRecipe,
    DialogRecipeDetails,
    BuildDialogComponent,
    DeployDialogComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatSelectModule,
    MatTabsModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatSliderModule,
    MatTooltipModule,
    MatCheckboxModule,
    MatMenuModule,
    MatStepperModule,
    MatAutocompleteModule,
    DragDropModule,
    HighlightModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    StoreModule.forRoot({ project: projectReducer, globalSpinnerState: globalSpinnerReducer, globalError: globalDialogReducer, globalAppConfiguration: globalConfigurationReducer }),
    ClipboardModule,
    EffectsModule.forRoot([ProjectEffects]),
    AngularSplitModule.forRoot(),
    CodemirrorModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: <HighlightOptions>{
        lineNumbers: true,
        languages: getHighlightLanguages(),
      }
    },
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    EventEmitterService,
    NodeService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example #24

Source File: dxc-slider.component.spec.ts From halstack-angular with Apache License 2.0

4 votes

describe("DxcSlider tests", () => {
  test("should render dxc-slider", async () => {
    const { getByText } = await render(DxcSliderComponent, {
      componentProperties: { showLimitsValues: true },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    expect(getByText("100")).toBeTruthy();
  });

  test("Uncontrolled dxc-slider", async () => {
    const onChangeFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        showInput: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    input.focus();
    fireEvent.click(input);
    fireEvent.input(input, { target: { value: value } });
    expect(onChangeFunction).toHaveBeenCalledWith(value);
  });

  test("Uncontrolled dxc-slider with default value", async () => {
    const onChangeFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        showInput: true,
        defaultValue: 10,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    expect(input.value).toBe("10");
    input.focus();
    fireEvent.click(input);
    fireEvent.input(input, { target: { value: value } });
    expect(onChangeFunction).toHaveBeenCalledWith(value);
    expect(input.value).toBe("22");
  });

  test("Controlled dxc-slider", async () => {
    const onChangeFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        value: 45,
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        showInput: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    input.focus();
    fireEvent.click(input);
    fireEvent.input(input, { target: { value: value } });
    expect(onChangeFunction).toHaveBeenCalledWith(value);
  });

  test("Disabled dxc-slider", async () => {
    const onChangeFunction = jest.fn();
    const onDragEndFunction = jest.fn();
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        value: 45,
        showLimitsValues: true,
        onChange: { emit: onChangeFunction } as any,
        onDragEnd: { emit: onDragEndFunction } as any,
        showInput: true,
        disabled: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("textbox");
    fireEvent.click(input);
    slider.detectChanges();
    expect(onChangeFunction).not.toHaveBeenCalledWith("");
    input.hasAttribute("disabled");
    expect(input.value).toBe("45");

    const sliderElement = <HTMLInputElement>slider.getByRole("slider");
    fireEvent.mouseUp(sliderElement);
    expect(onChangeFunction).not.toHaveBeenCalled();
  });

  test("DragEnd dxc-slider", async () => {
    const onDragEndFunction = jest.fn();
    const value = 22;
    TestBed.overrideComponent(DxcSliderComponent, {
      set: { selector: "slider" },
    });
    const slider = await render(DxcSliderComponent, {
      componentProperties: {
        value: 45,
        showLimitsValues: true,
        onDragEnd: { emit: onDragEndFunction } as any,
        showInput: true,
        disabled: true,
      },
      imports: [MatSliderModule, DxcTextInputModule],
    });
    const input = <HTMLInputElement>slider.getByRole("slider");
    fireEvent.mouseUp(input);
    expect(onDragEndFunction).toHaveBeenCalled();
  });
});

Example #25

Source File: material.module.ts From blockcore-hub with MIT License

4 votes

@NgModule({
    imports: [
        CdkTableModule,
        CdkTreeModule,
        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,
        ClipboardModule],
    exports: [CdkTableModule,
        CdkTreeModule,
        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,
        ClipboardModule],
})
export class MaterialModule {

}