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 '18 at 18:43
Atticus29Atticus29
866102554
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 '18 at 18:43
Atticus29Atticus29
866102554
did you try the solution?
– programoholic
Nov 24 '18 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 '18 at 18:43
Atticus29Atticus29
866102554
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 '18 at 18:43
Atticus29Atticus29
866102554
asked Nov 20 '18 at 18:43
Atticus29Atticus29
866102554
edited Nov 20 '18 at 19:51
Atticus29
asked Nov 20 '18 at 18:43
Atticus29Atticus29
866102554
asked Nov 20 '18 at 18:43
Atticus29Atticus29
866102554
asked Nov 20 '18 at 18:43
Atticus29Atticus29
866102554
866102554
did you try the solution?
– programoholic
Nov 24 '18 at 11:54
add a comment |
did you try the solution?
– programoholic
Nov 24 '18 at 11:54
did you try the solution?
– programoholic
Nov 24 '18 at 11:54
did you try the solution?
– programoholic
Nov 24 '18 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 '18 at 16:27
SandeepSandeep
14919
womp womp. Thanks!
– Atticus29
Nov 29 '18 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 '18 at 23:28
programoholicprogramoholic
5321426
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 '18 at 16:27
SandeepSandeep
14919
womp womp. Thanks!
– Atticus29
Nov 29 '18 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 '18 at 16:27
SandeepSandeep
14919
womp womp. Thanks!
– Atticus29
Nov 29 '18 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 '18 at 16:27
SandeepSandeep
14919
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 '18 at 16:27
SandeepSandeep
14919
edited Nov 25 '18 at 16:37
answered Nov 25 '18 at 16:27
SandeepSandeep
14919
answered Nov 25 '18 at 16:27
SandeepSandeep
14919
answered Nov 25 '18 at 16:27
SandeepSandeep
14919
14919
womp womp. Thanks!
– Atticus29
Nov 29 '18 at 2:00
add a comment |
womp womp. Thanks!
– Atticus29
Nov 29 '18 at 2:00
womp womp. Thanks!
– Atticus29
Nov 29 '18 at 2:00
womp womp. Thanks!
– Atticus29
Nov 29 '18 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 '18 at 23:28
programoholicprogramoholic
5321426
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 '18 at 23:28
programoholicprogramoholic
5321426
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 '18 at 23:28
programoholicprogramoholic
5321426
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 '18 at 23:28
programoholicprogramoholic
5321426
edited Nov 23 '18 at 23:37
answered Nov 23 '18 at 23:28
programoholicprogramoholic
5321426
answered Nov 23 '18 at 23:28
programoholicprogramoholic
5321426
answered Nov 23 '18 at 23:28
programoholicprogramoholic
5321426
5321426
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.
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 '18 at 11:54