Angular 5 Material Tabs

Angular 5 Material Tabs

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);


ANIL SINGH

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

Angular 5 Material Tabs Angular 5 Material Tabs Reviewed by Anil Singh on 5:05 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^