In this article you learn Angular Material Tabs
organize the content into separate tabs views where only one view can be
visible at a time and other tabs hidden i.e.
tabs.html -
The live Result link - https://stackblitz.com/edit/angular-1omip7-mucmrp
<mat-tab-group>
<mat-tab label="AngularJs">
<p>The angularjs is a JavaScript [MVW || MV*] framework and Its maintain by Google. The most of use to creating to single-page applications (SPA) with the MVC pattern. Its used for both client-side and server-side web application etc.</p>
</mat-tab>
<mat-tab label="Angular 2">
<p>Angular 2 is a most popular framework for developing mobile apps. It is also for “desktop” as well “mobile” applications. The Angular 6 is development phase you know very well and hopefully you love.</p>
</mat-tab>
<mat-tab label="Angular 4">
<p>Angular 4 contains some additional Enhancement and Improvement. Consider the following enhancements. <br/>
1. Smaller and Faster Apps <br/>
2. View Engine Size Reduce <br/>
3. And Many more
</p>
</mat-tab>
<mat-tab label="Angular 5">
<p>Angular 5 doc</p>
</mat-tab>
</mat-tab-group>
And tabs.ts -
import {Component} from '@angular/core';
/** @title Angular material tabs */
@Component({
selector: 'tabs',
templateUrl: 'tabs.html',
styleUrls: ['tabs.css'],
})
export class TabsExample {}
And NgModule with angular material file –
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CdkTableModule} from '@angular/cdk/table';
import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {TabsExample} from './app/tabs';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from '@angular/material';
@NgModule({
exports: [
CdkTableModule,
MatAutocompleteModule,
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,
]
})
export class DemoMaterialModule {}
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpModule,
HttpClientModule,
DemoMaterialModule,
MatNativeDateModule,
ReactiveFormsModule,
],
entryComponents: [TabsExample],
declarations: [TabsExample],
bootstrap: [TabsExample],
providers: []
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
0 comments:
Post a Comment