How to use Angular Material tabs on ionic

Ionic Framework ionic-v3
1

Hello guys,

How can I use Angular Material tabs on Ionic?

https://material.angular.io/components/tabs/overview

I installed Angular Material using npm command and I copied its example html contents on my ionic page:

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

However it shows basic html texts only. I don’t know why it’s not working on my ionic app.
I added following import to my html page ts file:

import { MatTabsModule } from '@angular/material/tabs';

and nothing changed.
I added it to app.module.ts and and put MatTabsModule to import declarations and now it throws me an error:

Cannot find module: 'rxjs/operators/debounceTime'

and the whole app doesn’t load.

A guy on Ionic github page told me Angular Material works on Ionic but I don’t see how?
How do you guys make this work on Ionic? I really need angular material tab on my app.
That tab exactly what I’m looking for.

Thanks!

2

Did you add MatTabsModule to your imports in your module?

1 Like
3

Yes, then it throws me an error message:

Cannot find module: 'rxjs/operators/debounceTime'

and now my whole app is not loading anymore.

Are you able to use Angular Material tabs on your app?

It looks like it’s crashing with other cordova plugins I’m using…

4

I’m using angular material datepicker and just import it in my module:

import {MatDatepickerModule} from "@angular/material/datepicker";
@NgModule({
  declarations: [
    //....
  ],
  imports: [
    //....
    MatDatepickerModule
  ],
  exports: [
//....
  ]
})

Cannot find module: ‘rxjs/operators/debounceTime’

I think you are missing the add, try:
import 'rxjs/add/operators/debounceTime'

1 Like
5

will try this shortly. Thanks!

6

Well,

Actually I wasn’t missing ‘add’… I have following on my page’s ts file.
import 'rxjs/add/operator/debounceTime';

Yes, this problem is not solved.
Is there anyone who knows how to use Angular material tab on ionic?

and why does it say
'rxjs/operator/debounceTime module is not found' when I put 'MatTabsModule' to imports on app.module.ts?

Any opinion would be appreciated.

7

or do you guys know any NPM which works like material tab?
I need that sliding animation between tabs within a single html page.

Thanks,

8

Quick google search for ‘ionic 2 sliding tabs’ results in this:

However, reading the github issues, I’d use version 4.1.4

npm i --save ionic2-super-tabs@4.1.4
1 Like
9

Thanks for bringing this up!

Yeah, this is indeed similar and actually identical.
I will try this now although some people are saying it has few bugs.

Does this Super Tabs work within a single HTML page? it seems to require several pages to work unlike Angular Material tabs which creates tab pages within a single HTML page based on <div>.

I’m building an app which does most of its jobs on a single html page so ideally if I manage to work with that Angular material tab, it’s going to be fantastic but Ionic doesn’t seem to work well with all angular material components…
Other opinions would be still appreciated.

10

any opinion would be still very appreciated.