Using Angular Material 2 Tabs Component with Angular 4.0.0-rc.1

Question

I recently updated my project from Angular 2.4.6 to to Angular 4.0.0-rc.1 after which Angular 2 Material 2 Tab component doesn't seem to work properly.

When I switch tabs the contents overlaps with each other.

Apparently because, the latest RC introduced and deprecated and template attribute.

Can anyone please guide how to overcome this issue, while the material add support for Angular 4?

Answer 1

It because animation doesn't work with current configuration.

Accordignly to changelog

Animation Package

We have pulled Animations into their own package. This means that if you don’t use Animations, this extra code will not end up in your production bundles. This also allows you to more easily find documentation and to take better advantage of autocompletion. If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule.

So what we need to do?

1) npm i --save @angular/animations

2) add BrowserAnimationsModule to imports array of @NgModule

import { MatTabsModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, MatTabsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

If you use systemjs then don't forget about config:

'@angular/animations': 'npm:@angular/animations@next/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

Plunker Example