@angular/material/tabs#MatTabsModule TypeScript Examples

The following examples show how to use @angular/material/tabs#MatTabsModule. 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: dashboard.module.ts From fyle-mobile-app with MIT License

6 votes

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DashboardPageRoutingModule,
    MatExpansionModule,
    SharedModule,
    MatIconModule,
    MatRippleModule,
    MatTabsModule,
    MatBottomSheetModule,
    MatSnackBarModule,
    SwiperModule,
  ],
  declarations: [DashboardPage, StatsComponent, StatBadgeComponent, TasksComponent, TasksCardComponent],
  providers: [DashboardService],
})
export class DashboardPageModule {}

Example #2

Source File: app.module.ts From material-reusable-table with Apache License 2.0

6 votes

@NgModule({
  declarations: [
    AppComponent,
    OrdersComponent,
    TableComponent,
    DataPropertyGetterPipe,
    CustomersComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatFormFieldModule,
    MatInputModule,
    MatPaginatorModule,
    MatSortModule,
    MatIconModule,
    MatButtonModule,
    MatTabsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Example #3

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

6 votes

@NgModule({
  declarations: [DxcTabbedSectionComponent],
  imports: [
    ReactiveFormsModule,
    FormsModule,
    CommonModule,
    MatTabsModule,
    MatIconModule,
    ScrollSpyModule,
    DxcTabsModule,
  ],
  exports: [DxcTabbedSectionComponent],
})
export class DxcTabbedSectionModule {}

Example #4

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

6 votes

@NgModule({
  declarations: [DxcTabsComponent, DxcTabComponent, DxcTabIconComponent],
  imports: [
    CommonModule,
    MatInputModule,
    MatTabsModule,
    MatFormFieldModule,
    DxcBadgeModule,
    FormsModule,
  ],
  exports: [DxcTabsComponent, DxcTabComponent, DxcTabIconComponent],
  entryComponents: [MatTab, MatTabGroup],
})
export class DxcTabsModule {}

Example #5

Source File: example-viewer.module.ts From halstack-angular with Apache License 2.0

6 votes

@NgModule({
  declarations: [ExampleViewerComponent],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    MatIconModule,
    MatTabsModule,
    DynamicModule,
    CodePlaygroundModule,
    MonacoEditorModule.forRoot(), // use forRoot() in main app module only.
  ],
  exports: [ExampleViewerComponent],
  entryComponents: [DynamicComponentComponent],
})
export class ExampleViewerModule {}

Example #6

Source File: tabbed-section.module.ts From halstack-angular with Apache License 2.0

6 votes

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

Example #7

Source File: overview-page.module.ts From halstack-angular with Apache License 2.0

6 votes

@NgModule({
  declarations: [
    OverviewPageComponent,
    OverviewInstallComponent,
    OverviewSupportComponent,
    OverviewUseComponent,
    OverviewThemesComponent,
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    TabbedSectionModule,
    DxcBoxModule,
    DxcTagModule,
    RouterModule,
    MatIconModule,
    MatTabsModule,
    FormsModule,
    CodePlaygroundModule,
    DxcHeadingModule,
  ],
  exports: [],
  entryComponents: [DxcBoxComponent, DxcTagComponent, DxcHeadingComponent],
})
export class OverviewPageModule {}

Example #8

Source File: auth.module.ts From angular-material-admin with MIT License

6 votes

@NgModule({
  declarations: [
    AuthPageComponent,
    YearPipe,
    LoginFormComponent,
    SignFormComponent
  ],
  imports: [
    CommonModule,
    AuthRoutingModule,
    MatTabsModule,
    MatButtonModule,
    MatInputModule,
    ReactiveFormsModule,
    FormsModule
  ],
  providers: [
    AuthService,
    EmailService,
    AuthGuard
  ]
})
export class AuthModule { }

Example #9

Source File: ui-elements.module.ts From angular-material-admin with MIT License

6 votes

@NgModule({
  declarations: [
    IconsPageComponent,
    ChartsPageComponent,
    MapPageComponent,
    LineChartComponent,
    DashedLineChartComponent,
    PieChartComponent,
    HeatmapChartComponent
  ],
  imports: [
    CommonModule,
    UiElementsRoutingModule,
    MatButtonModule,
    MatCardModule,
    MatTabsModule,
    MatIconModule,
    NgApexchartsModule,
    AgmCoreModule,
    AgmCoreModule.forRoot({
      apiKey: googleMapKey
    }),
    MatToolbarModule,
    SharedModule,
    DashboardModule,
  ],
  providers: [
    ChartsService
  ]
})
export class UiElementsModule { }

Example #10

Source File: app.module.ts From ngx-colors with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    CustomTriggerExampleComponent,
    DocumentViewerComponent,
    HideElementsExampleComponent,
    CustomPaletteExampleComponent,
    ChangeAcceptLabelExampleComponent
  ],
  imports: [
    HighlightModule,
    BrowserModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NgxColorsModule,
    MatTabsModule,
    FormsModule,
    HttpClientModule,
    MatInputModule,
    MatSlideToggleModule,
    MatButtonModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        languages: getHighlightLanguages()
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #11

Source File: feature-record.module.ts From geonetwork-ui with GNU General Public License v2.0

6 votes

@NgModule({
  declarations: [
    RecordMetadataComponent,
    DataViewMapComponent,
    DataViewTableComponent,
    DataDownloadsComponent,
    DataApisComponent,
    DataOtherlinksComponent,
    RelatedRecordsComponent,
    ExternalViewerButtonComponent,
  ],
  imports: [
    CommonModule,
    ApiModule,
    StoreModule.forFeature(MD_VIEW_FEATURE_STATE_KEY, reducer),
    EffectsModule.forFeature([MdViewEffects]),
    UiLayoutModule,
    FeatureMapModule,
    FeatureCatalogModule,
    UiMapModule,
    UiInputsModule,
    UiElementsModule,
    MatTabsModule,
    MatIconModule,
    UiWidgetsModule,
    TranslateModule,
  ],
  providers: [MdViewFacade],
  exports: [
    RecordMetadataComponent,
    DataViewMapComponent,
    DataViewTableComponent,
    DataDownloadsComponent,
    DataApisComponent,
    DataOtherlinksComponent,
  ],
})
export class FeatureRecordModule {}

Example #12

Source File: server-info.module.ts From models-web-app with Apache License 2.0

6 votes

@NgModule({
  declarations: [ServerInfoComponent],
  imports: [
    CommonModule,
    KubeflowModule,
    MatIconModule,
    MatDividerModule,
    MatTabsModule,
    MatProgressSpinnerModule,
    OverviewModule,
    DetailsModule,
    MetricsModule,
    LogsModule,
    YamlsModule,
  ],
})
export class ServerInfoModule {}

Example #13

Source File: docs.module.ts From open-source with MIT License

6 votes

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    FlexLayoutModule,
    RouterModule.forChild(routes),
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatExpansionModule,
    MatListModule,
    MatSnackBarModule,
    MatTooltipModule,
    LayoutModule,
  ],
  declarations: [
    LayoutComponent,
    ContentComponent,
    ExampleComponent,
    ViewerComponent,
    StackblitzComponent,
  ],
  providers: [
    ContentService,
  ],
})
export class DocsModule {}

Example #14

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 #15

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 #16

Source File: ocr-parser.module.ts From loopback4-microservice-catalog with MIT License

6 votes

@NgModule({
  declarations: [
    OcrParserComponent,
    TabsComponent,
    FieldViewerComponent,
    HtmlViewerComponent,
    NoSanitizePipe,
    TextSelectDirective
  ],
  imports: [
    CommonModule,
    FormsModule,
    MatTabsModule,
    MatCardModule,
    NgxMarkjsModule,
    FlexLayoutModule,
    NgCircleProgressModule.forRoot({
      // set defaults here
      radius: 100,
      outerStrokeWidth: 16,
      innerStrokeWidth: 8,
      outerStrokeColor: "#78C000",
      innerStrokeColor: "#C7E596",
      animationDuration: 300,
    }),
  ],
  providers: [OcrDataService],
  exports: [
    OcrParserComponent
  ]
})
export class OcrParserModule { }

Example #17

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 #18

Source File: json-schema-form.module.ts From json-schema-form with Apache License 2.0

6 votes

@NgModule({
  declarations: [JsonSchemaFormComponent, EditElementDialogComponent, WidgetDirective],
  imports: [
    MatCardModule,
    FlexLayoutModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatTabsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatDatepickerModule,
    MatCheckboxModule,
    MatAutocompleteModule,
    HttpClientModule,
    CommonModule,
    MatInputModule,
    MatNativeDateModule,
    MatButtonModule,
    MatExpansionModule,
    MatMenuModule,
    ReactiveFormsModule,
    MatDialogModule,
    MatChipsModule,
    DragDropModule
  ],
  exports: [JsonSchemaFormComponent],
  providers: [
    // turn off tooltip gestures on mobile: https://github.com/angular/components/issues/4892
    { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: { touchGestures: 'off' } },
    { provide: EDIT_DIALOG_TOKEN, useValue: EditElementDialogComponent }
  ]

})
export class JsonSchemaFormModule { }

Example #19

Source File: app.module.ts From league-profile-tool with MIT License

6 votes

@NgModule({
  declarations: [AppComponent, HomeComponent, StatusComponent, DialogComponent, ChibiComponent, BackgroundComponent, ChampionsPipe, ChatrankComponent, ChampionPurchaseDateComponent, CustomapiComponent, FaqComponent, CustomiconComponent, IconsPipe, PracticetoolComponent],
  imports: [
    BrowserModule,
    FormsModule,
    CoreModule,
    AppRoutingModule,
    MatTabsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    MatInputModule,
    MatDialogModule,
    MatSelectModule,
    MatSortModule,
    HttpClientModule,
  ],
  providers: [ElectronService],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Example #20

Source File: uploader.module.ts From nghacks with MIT License

6 votes

@NgModule({
  declarations: [UploaderComponent, ImageUploaderComponent, FileUploaderComponent],
  imports: [
    CommonModule,
    UploaderRoutingModule,
    ConsumerCommonModule,
    UploaderModule,
    FormsModule,
    ReactiveFormsModule,
    MatTabsModule
  ]
})
export class UploaderConsumerModule { }

Example #21

Source File: banner-carousel.module.ts From nghacks with MIT License

6 votes

@NgModule({
  declarations: [
    BannerCarouselComponent,
    ImageComponent
  ],
  imports: [
    CommonModule,
    MatTabsModule,
    MatIconModule,
    MatButtonModule
  ],
  providers: [
    BannerCarouselService
  ],
  exports: [
    BannerCarouselComponent
  ]
})
export class BannerCarouselModule { }

Example #22

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

6 votes

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    LoginComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MaterialModule,
    MatCardModule,
    MatTabsModule,
    MatGridListModule,
    FormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Example #23

Source File: app.module.ts From travel-list with MIT License

6 votes

@NgModule({
  declarations: [
    AppComponent,
    TravelListComponent,
    TravelTabsComponent,
    NewComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    HttpClientModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatTabsModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Example #24

Source File: home.module.ts From VIR with MIT License

6 votes

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule, SharedModule, HomeRoutingModule, MatButtonModule,
    MatToolbarModule, MatIconModule, MatSlideToggleModule, MatSidenavModule,
    MatTabsModule, ItemsModule,
    MatTooltipModule, TimelineModule, DayViewModule, MatFormFieldModule,
    MatDatepickerModule, MatInputModule, QueueModule, QuotaListModule,
    MatDividerModule, SettingsDialogModule, StartDialogModule, AlertListModule,
    TimerModule,
  ],
})
export class HomeModule {
}

Example #25

Source File: app-material.module.ts From barista with Apache License 2.0

6 votes

expose = [
  BrowserAnimationsModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatDialogModule,
  MatGridListModule,
  MatIconModule,
  MatListModule,
  MatMenuModule,
  MatSidenavModule,
  MatSnackBarModule,
  MatTabsModule,
  MatToolbarModule,
  MatButtonModule,
  MatCardModule,
  MatGridListModule,
  MatIconModule,
  MatMenuModule,
  MatTreeModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  MatOptionModule,
  MatProgressSpinnerModule,
  MatExpansionModule,
  MatTooltipModule,
]

Example #26

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 #27

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 #28

Source File: app.module.ts From sdkgen with MIT License

5 votes

@NgModule({
  declarations: [
    AppComponent,
    SimpleCallComponent,
    TabNavComponent,
    TabEditorComponent,
    TabHomeComponent,
    FilterPipe,
    ConsoleComponent,
    TypeDetailsComponent,
    DialogAboutComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MonacoEditorModule,
    BrowserAnimationsModule,
    NgxJsonViewerModule,
    ToastrModule.forRoot(),
    AngularSplitModule,
    HttpClientModule,

    MatButtonModule,
    MatChipsModule,
    MatDialogModule,
    MatIconModule,
    MatMenuModule,
    MatRippleModule,
    MatTableModule,
    MatTabsModule,
    MatTooltipModule,
  ],
  providers: [
    {
      provide: MONACO_PATH,
      useValue: "assets/vs",
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example #29

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