CODEWITHSUNDEEP
angular
Rajat Gupta
Rajat Gupta

Reputation: 578

Angular4 tabs not working using <mat-tab-group>

Can't get tabs by using <mat-tab-group>

I have installed latest nodejs, angular cli, and angular material but i cant get tabs when i run project in browser

@angular/cli: 1.4.5
node: 8.7.0
os: linux x64
@angular/animations: 4.4.5
@angular/cdk: 2.0.0-beta.12
@angular/common: 4.4.5
@angular/compiler: 4.4.5
@angular/core: 4.4.5
@angular/forms: 4.4.5
@angular/http: 4.4.5
@angular/material: 2.0.0-beta.12
@angular/platform-browser: 4.4.5
@angular/platform-browser-dynamic: 4.4.5
@angular/router: 4.4.5
@angular/cli: 1.4.5
@angular/compiler-cli: 4.4.5
@angular/language-service: 4.4.5
typescript: 2.3.4

Registration component Html

<app-header>


</app-header>

<div class="mainwrap">
        <div class="heading"> 
        Registration
        </div>

        <mat-tab-group>
            <mat-tab label="Tab 1">Content 1</mat-tab>
            <mat-tab label="Tab 2">Content 2</mat-tab>
          </mat-tab-group>


</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RegistrationComponent } from './registration/registration.component';
import {MatTabsModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RegistrationComponent
  ],
  imports: [
    BrowserModule,
    MatTabsModule,
    RouterModule.forRoot(
    [
    {
      path: '',
      redirectTo: 'registration',
      pathMatch: 'full'
    },
    {
    path: 'registration',
    component: RegistrationComponent
    }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 5

Views: 13854

Answers (3)

Rajat Gupta
Rajat Gupta

Reputation: 578

I have found my answer after some research

I did not import BrowserAniminationModule in app.module.ts due to which i could not use the tabs properly.

Upvotes: 9

Olivier
Olivier

Reputation: 11

I had a problem similar only with mat-tabs, and it appears it was another error that was causing trouble. After resolving other issues (in browser console), the tabs finally appeared !

Upvotes: 1

sowmya sekar
sowmya sekar

Reputation: 1

Include theme

https://material.angular.io/guide/getting-started#step-4-include-a-theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.

Upvotes: 0

Related Questions