Angular 2+ theme button colors not working
I have a stackblitz example here
that I believe is set up following the Angular theming documentation, and yet the colors in the following code are not displaying:
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
What's more, I'm brand new to stackblitz and can't find where the body tag is (it's not in index.html?!), so I assigned the my-app tag the class,"mat-app-background":
<my-app class="mat-app-background">loading</my-app>
I have looked through several SO entries (e.g. this)and github issues pages (e.g., this), and none seem to be relevant to my issue or current. Any help is much appreciated.
angular themes
asked Nov 20 at 18:43
Atticus29
831102352
add a comment |
I have a stackblitz example here
that I believe is set up following the Angular theming documentation, and yet the colors in the following code are not displaying:
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
What's more, I'm brand new to stackblitz and can't find where the body tag is (it's not in index.html?!), so I assigned the my-app tag the class,"mat-app-background":
<my-app class="mat-app-background">loading</my-app>
I have looked through several SO entries (e.g. this)and github issues pages (e.g., this), and none seem to be relevant to my issue or current. Any help is much appreciated.
angular themes
asked Nov 20 at 18:43
Atticus29
831102352
did you try the solution?
– programoholic
Nov 24 at 11:54
add a comment |
I have a stackblitz example here
that I believe is set up following the Angular theming documentation, and yet the colors in the following code are not displaying:
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
What's more, I'm brand new to stackblitz and can't find where the body tag is (it's not in index.html?!), so I assigned the my-app tag the class,"mat-app-background":
<my-app class="mat-app-background">loading</my-app>
I have looked through several SO entries (e.g. this)and github issues pages (e.g., this), and none seem to be relevant to my issue or current. Any help is much appreciated.
angular themes
asked Nov 20 at 18:43
Atticus29
831102352
I have a stackblitz example here
that I believe is set up following the Angular theming documentation, and yet the colors in the following code are not displaying:
<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>
What's more, I'm brand new to stackblitz and can't find where the body tag is (it's not in index.html?!), so I assigned the my-app tag the class,"mat-app-background":
<my-app class="mat-app-background">loading</my-app>
I have looked through several SO entries (e.g. this)and github issues pages (e.g., this), and none seem to be relevant to my issue or current. Any help is much appreciated.
angular themes
angular themes
asked Nov 20 at 18:43
Atticus29
831102352
asked Nov 20 at 18:43
Atticus29
831102352
edited Nov 20 at 19:51
asked Nov 20 at 18:43
Atticus29
831102352
asked Nov 20 at 18:43
Atticus29
831102352
asked Nov 20 at 18:43
Atticus29
831102352
831102352
did you try the solution?
– programoholic
Nov 24 at 11:54
add a comment |
did you try the solution?
– programoholic
Nov 24 at 11:54
did you try the solution?
– programoholic
Nov 24 at 11:54
did you try the solution?
– programoholic
Nov 24 at 11:54
add a comment |
2 Answers
2
active
oldest
votes
All you forgot here was to import MatButtonModule like:
import {MatButtonModule} from '@angular/material';
and then off-course in import array
imports: [ BrowserModule, FormsModule, MatButtonModule ]
in your app.module.ts since you have single module here.Here's stackblitz
answered Nov 25 at 16:27
Sandeep
1399
womp womp. Thanks!
– Atticus29
Nov 29 at 2:00
add a comment |
You Don't have Material installed in your App.
Go to :
https://material.angular.io/guide/getting-started
and follow step by step guide.
Also i have updated the your stackblitz, now its working
https://stackblitz.com/edit/angular-p5dhxg
Here is how you can add dependency on stackblitz :
Just type your dependency name in the text box below exactly.
For example if you want to install material then type : @angular/material and hit enter . The dependency will be installed.
Hope it helps .
answered Nov 23 at 23:28
programoholic
2861424
add a comment |
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%2f53399520%2fangular-2-theme-button-colors-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
All you forgot here was to import MatButtonModule like:
import {MatButtonModule} from '@angular/material';
and then off-course in import array
imports: [ BrowserModule, FormsModule, MatButtonModule ]
in your app.module.ts since you have single module here.Here's stackblitz
answered Nov 25 at 16:27
Sandeep
1399
womp womp. Thanks!
– Atticus29
Nov 29 at 2:00
add a comment |
All you forgot here was to import MatButtonModule like:
import {MatButtonModule} from '@angular/material';
and then off-course in import array
imports: [ BrowserModule, FormsModule, MatButtonModule ]
in your app.module.ts since you have single module here.Here's stackblitz
answered Nov 25 at 16:27
Sandeep
1399
womp womp. Thanks!
– Atticus29
Nov 29 at 2:00
add a comment |
All you forgot here was to import MatButtonModule like:
import {MatButtonModule} from '@angular/material';
and then off-course in import array
imports: [ BrowserModule, FormsModule, MatButtonModule ]
in your app.module.ts since you have single module here.Here's stackblitz
answered Nov 25 at 16:27
Sandeep
1399
All you forgot here was to import MatButtonModule like:
import {MatButtonModule} from '@angular/material';
and then off-course in import array
imports: [ BrowserModule, FormsModule, MatButtonModule ]
in your app.module.ts since you have single module here.Here's stackblitz
answered Nov 25 at 16:27
Sandeep
1399
edited Nov 25 at 16:37
answered Nov 25 at 16:27
Sandeep
1399
answered Nov 25 at 16:27
Sandeep
1399
answered Nov 25 at 16:27
Sandeep
1399
1399
womp womp. Thanks!
– Atticus29
Nov 29 at 2:00
add a comment |
womp womp. Thanks!
– Atticus29
Nov 29 at 2:00
womp womp. Thanks!
– Atticus29
Nov 29 at 2:00
womp womp. Thanks!
– Atticus29
Nov 29 at 2:00
add a comment |
You Don't have Material installed in your App.
Go to :
https://material.angular.io/guide/getting-started
and follow step by step guide.
Also i have updated the your stackblitz, now its working
https://stackblitz.com/edit/angular-p5dhxg
Here is how you can add dependency on stackblitz :
Just type your dependency name in the text box below exactly.
For example if you want to install material then type : @angular/material and hit enter . The dependency will be installed.
Hope it helps .
answered Nov 23 at 23:28
programoholic
2861424
add a comment |
You Don't have Material installed in your App.
Go to :
https://material.angular.io/guide/getting-started
and follow step by step guide.
Also i have updated the your stackblitz, now its working
https://stackblitz.com/edit/angular-p5dhxg
Here is how you can add dependency on stackblitz :
Just type your dependency name in the text box below exactly.
For example if you want to install material then type : @angular/material and hit enter . The dependency will be installed.
Hope it helps .
answered Nov 23 at 23:28
programoholic
2861424
add a comment |
You Don't have Material installed in your App.
Go to :
https://material.angular.io/guide/getting-started
and follow step by step guide.
Also i have updated the your stackblitz, now its working
https://stackblitz.com/edit/angular-p5dhxg
Here is how you can add dependency on stackblitz :
Just type your dependency name in the text box below exactly.
For example if you want to install material then type : @angular/material and hit enter . The dependency will be installed.
Hope it helps .
answered Nov 23 at 23:28
programoholic
2861424
You Don't have Material installed in your App.
Go to :
https://material.angular.io/guide/getting-started
and follow step by step guide.
Also i have updated the your stackblitz, now its working
https://stackblitz.com/edit/angular-p5dhxg
Here is how you can add dependency on stackblitz :
Just type your dependency name in the text box below exactly.
For example if you want to install material then type : @angular/material and hit enter . The dependency will be installed.
Hope it helps .
answered Nov 23 at 23:28
programoholic
2861424
edited Nov 23 at 23:37
answered Nov 23 at 23:28
programoholic
2861424
answered Nov 23 at 23:28
programoholic
2861424
answered Nov 23 at 23:28
programoholic
2861424
2861424
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53399520%2fangular-2-theme-button-colors-not-working%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
did you try the solution?
– programoholic
Nov 24 at 11:54