Mixing
Angular Material tabs are not rendered at all
I am trying to use the Angular Material Tabs Module but it's not rendered properly. Instead of the tabs, just the text is being displayed.
I'm using Angular 6, with Angular Material version 6.4.7
I followed the setup procedure described on https://v6.material.angular.io/guide/getting-started (npm installation, no snapshots)
Then I did some research on common pitfalls. I checked the proper imports, made sure the stylesheet is imported and that I use the BrowserAnimationsModule as well as the base module MatInputModule. In fact, none the of the answers on Stackoverflow helped me solve the issue.
This is what the respective section in my template looks like:
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
As some other responses point out missing import, I double checked. Here are my imports in the app.module.ts file:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material';
import { MatTabsModule } from '@angular/material/tabs';
They are also define in the @NgModule:
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule,
MatTabsModule,
I also checked for the imported theme: here are the respective lines in my index.html file:
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
I would expect the tabs to be displayed, but instead only the Text is displayed: 
So obviously I'm forgetting something. Any pointers would be appreciated.
angular angular-material asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
add a comment |
I am trying to use the Angular Material Tabs Module but it's not rendered properly. Instead of the tabs, just the text is being displayed.
I'm using Angular 6, with Angular Material version 6.4.7
I followed the setup procedure described on https://v6.material.angular.io/guide/getting-started (npm installation, no snapshots)
Then I did some research on common pitfalls. I checked the proper imports, made sure the stylesheet is imported and that I use the BrowserAnimationsModule as well as the base module MatInputModule. In fact, none the of the answers on Stackoverflow helped me solve the issue.
This is what the respective section in my template looks like:
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
As some other responses point out missing import, I double checked. Here are my imports in the app.module.ts file:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material';
import { MatTabsModule } from '@angular/material/tabs';
They are also define in the @NgModule:
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule,
MatTabsModule,
I also checked for the imported theme: here are the respective lines in my index.html file:
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
I would expect the tabs to be displayed, but instead only the Text is displayed:
So obviously I'm forgetting something. Any pointers would be appreciated.
angular angular-material asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
1
Your web server can' serve anything from node_modules. Do as the getting started guide says: material.angular.io/guide/….
– JB Nizet
Jan 2 at 16:33
I did in fact try that as well. However, I'm not sure to which file I need to add it. I don't have a styles.css file, but a global.scss file, so I added it there -> no success.
– Fish-Guts
Jan 2 at 16:36
1
You're not using the standard CLI project structure, so we can't know how you configured your project. If you want to use a link to a css file in your index.html, then copy it to the assets directory (assuming your project does have an assets directory, since it doesn't seem to use the standard CLI layout), and use the path to that file instead of a path to node_modules.
– JB Nizet
Jan 2 at 16:41
It's a generated project using jHipster, so I assumed the setup should follow some standard layouting. Anyway, is it safe to say that it's most likely related to shylesheet linking?
– Fish-Guts
Jan 2 at 16:44
add a comment |
I am trying to use the Angular Material Tabs Module but it's not rendered properly. Instead of the tabs, just the text is being displayed.
I'm using Angular 6, with Angular Material version 6.4.7
I followed the setup procedure described on https://v6.material.angular.io/guide/getting-started (npm installation, no snapshots)
Then I did some research on common pitfalls. I checked the proper imports, made sure the stylesheet is imported and that I use the BrowserAnimationsModule as well as the base module MatInputModule. In fact, none the of the answers on Stackoverflow helped me solve the issue.
This is what the respective section in my template looks like:
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
As some other responses point out missing import, I double checked. Here are my imports in the app.module.ts file:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material';
import { MatTabsModule } from '@angular/material/tabs';
They are also define in the @NgModule:
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule,
MatTabsModule,
I also checked for the imported theme: here are the respective lines in my index.html file:
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
I would expect the tabs to be displayed, but instead only the Text is displayed:
So obviously I'm forgetting something. Any pointers would be appreciated.
angular angular-material asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
I am trying to use the Angular Material Tabs Module but it's not rendered properly. Instead of the tabs, just the text is being displayed.
I'm using Angular 6, with Angular Material version 6.4.7
I followed the setup procedure described on https://v6.material.angular.io/guide/getting-started (npm installation, no snapshots)
Then I did some research on common pitfalls. I checked the proper imports, made sure the stylesheet is imported and that I use the BrowserAnimationsModule as well as the base module MatInputModule. In fact, none the of the answers on Stackoverflow helped me solve the issue.
This is what the respective section in my template looks like:
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
As some other responses point out missing import, I double checked. Here are my imports in the app.module.ts file:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material';
import { MatTabsModule } from '@angular/material/tabs';
They are also define in the @NgModule:
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule,
MatTabsModule,
I also checked for the imported theme: here are the respective lines in my index.html file:
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
I would expect the tabs to be displayed, but instead only the Text is displayed:
So obviously I'm forgetting something. Any pointers would be appreciated.
angular angular-material angular angular-material asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
asked Jan 2 at 16:29
Fish-GutsFish-Guts
1039
1039
1
Your web server can' serve anything from node_modules. Do as the getting started guide says: material.angular.io/guide/….
– JB Nizet
Jan 2 at 16:33
I did in fact try that as well. However, I'm not sure to which file I need to add it. I don't have a styles.css file, but a global.scss file, so I added it there -> no success.
– Fish-Guts
Jan 2 at 16:36
1
You're not using the standard CLI project structure, so we can't know how you configured your project. If you want to use a link to a css file in your index.html, then copy it to the assets directory (assuming your project does have an assets directory, since it doesn't seem to use the standard CLI layout), and use the path to that file instead of a path to node_modules.
– JB Nizet
Jan 2 at 16:41
It's a generated project using jHipster, so I assumed the setup should follow some standard layouting. Anyway, is it safe to say that it's most likely related to shylesheet linking?
– Fish-Guts
Jan 2 at 16:44
add a comment |
1
Your web server can' serve anything from node_modules. Do as the getting started guide says: material.angular.io/guide/….
– JB Nizet
Jan 2 at 16:33
I did in fact try that as well. However, I'm not sure to which file I need to add it. I don't have a styles.css file, but a global.scss file, so I added it there -> no success.
– Fish-Guts
Jan 2 at 16:36
1
You're not using the standard CLI project structure, so we can't know how you configured your project. If you want to use a link to a css file in your index.html, then copy it to the assets directory (assuming your project does have an assets directory, since it doesn't seem to use the standard CLI layout), and use the path to that file instead of a path to node_modules.
– JB Nizet
Jan 2 at 16:41
It's a generated project using jHipster, so I assumed the setup should follow some standard layouting. Anyway, is it safe to say that it's most likely related to shylesheet linking?
– Fish-Guts
Jan 2 at 16:44
1
1
Your web server can' serve anything from node_modules. Do as the getting started guide says: material.angular.io/guide/….
– JB Nizet
Jan 2 at 16:33
Your web server can' serve anything from node_modules. Do as the getting started guide says: material.angular.io/guide/….
– JB Nizet
Jan 2 at 16:33
I did in fact try that as well. However, I'm not sure to which file I need to add it. I don't have a styles.css file, but a global.scss file, so I added it there -> no success.
– Fish-Guts
Jan 2 at 16:36
I did in fact try that as well. However, I'm not sure to which file I need to add it. I don't have a styles.css file, but a global.scss file, so I added it there -> no success.
– Fish-Guts
Jan 2 at 16:36
1
1
You're not using the standard CLI project structure, so we can't know how you configured your project. If you want to use a link to a css file in your index.html, then copy it to the assets directory (assuming your project does have an assets directory, since it doesn't seem to use the standard CLI layout), and use the path to that file instead of a path to node_modules.
– JB Nizet
Jan 2 at 16:41
You're not using the standard CLI project structure, so we can't know how you configured your project. If you want to use a link to a css file in your index.html, then copy it to the assets directory (assuming your project does have an assets directory, since it doesn't seem to use the standard CLI layout), and use the path to that file instead of a path to node_modules.
– JB Nizet
Jan 2 at 16:41
It's a generated project using jHipster, so I assumed the setup should follow some standard layouting. Anyway, is it safe to say that it's most likely related to shylesheet linking?
– Fish-Guts
Jan 2 at 16:44
It's a generated project using jHipster, so I assumed the setup should follow some standard layouting. Anyway, is it safe to say that it's most likely related to shylesheet linking?
– Fish-Guts
Jan 2 at 16:44
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009844%2fangular-material-tabs-are-not-rendered-at-all%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009844%2fangular-material-tabs-are-not-rendered-at-all%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Your web server can' serve anything from node_modules. Do as the getting started guide says: material.angular.io/guide/….
– JB Nizet
Jan 2 at 16:33
I did in fact try that as well. However, I'm not sure to which file I need to add it. I don't have a styles.css file, but a global.scss file, so I added it there -> no success.
– Fish-Guts
Jan 2 at 16:36
1
You're not using the standard CLI project structure, so we can't know how you configured your project. If you want to use a link to a css file in your index.html, then copy it to the assets directory (assuming your project does have an assets directory, since it doesn't seem to use the standard CLI layout), and use the path to that file instead of a path to node_modules.
– JB Nizet
Jan 2 at 16:41
It's a generated project using jHipster, so I assumed the setup should follow some standard layouting. Anyway, is it safe to say that it's most likely related to shylesheet linking?
– Fish-Guts
Jan 2 at 16:44