Angular Material Tabs organize the content into separate
views where only one view can be visible at a time i.e.
tabs.html -
<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);
The Result link- https://stackblitz.com/edit/angular-q6ofe8