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
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
