Mixing
Angular Material styles not being applied correctly
Any ideas why the angular material styles are not being applied correctly?
I know there are a lot of questions on this but I can't seem to find one that resolved my problem.
I have used angular material with no problem for several projects but can't seem to figure out what is going on here.
I am probably overlooking something simple but just can't see it. I have just upgraded to angular 7 so it could be related to that.
This is my dialog which just displays in the parent page with weird or no styling. It is doing something as the buttons have changed slightly as you can see compared to the cancel button.
<div>
<h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
<div>
<div>
<mat-form-field>
<mat-label>Title</mat-label>
<input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
<mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
</mat-form-field>
</div>
<div>
<button (click)="this.dialogRef.close()">Cancel</button>
<button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
</div>
</div>
</div>
import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-new-course-item-dialog',
templateUrl: './new-course-item-dialog.component.html',
styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit {
newCourseItem: CourseItem = new CourseItem();
constructor(public dialogRef: MatDialogRef<NewCourseItemDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatInputModule, MatDialogModule, MatButtonModule, MatFormFieldModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
CourseAdminComponent,
NewCourseItemDialogComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
MatDialogModule,
BrowserAnimationsModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule
],
providers: [
AuthService,
DataService
],
bootstrap: [AppComponent],
entryComponents: [
NewCourseItemDialogComponent
]
})
export class AppModule { }
Angular CLI: 7.0.5
Node: 10.7.0
OS: win32 x64
Angular: 7.0.4
... animations, cdk, common, core, material
Package Version
-------------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/build-angular 0.10.5
@angular-devkit/build-optimizer 0.10.5
@angular-devkit/build-webpack 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@angular/compiler 7.0.3
@angular/compiler-cli 7.0.3
@angular/flex-layout 7.0.0-beta.19
@angular/forms 7.0.3
@angular/http 7.0.3
@angular/language-service 7.0.3
@angular/platform-browser 7.0.3
@angular/platform-browser-dynamic 7.0.3
@angular/router 7.0.3
@ngtools/webpack 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1
angular angular-material angular7
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
asked Nov 20 '18 at 21:52
MadMacMadMac
367
add a comment |
Any ideas why the angular material styles are not being applied correctly?
I know there are a lot of questions on this but I can't seem to find one that resolved my problem.
I have used angular material with no problem for several projects but can't seem to figure out what is going on here.
I am probably overlooking something simple but just can't see it. I have just upgraded to angular 7 so it could be related to that.
This is my dialog which just displays in the parent page with weird or no styling. It is doing something as the buttons have changed slightly as you can see compared to the cancel button.
<div>
<h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
<div>
<div>
<mat-form-field>
<mat-label>Title</mat-label>
<input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
<mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
</mat-form-field>
</div>
<div>
<button (click)="this.dialogRef.close()">Cancel</button>
<button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
</div>
</div>
</div>
import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-new-course-item-dialog',
templateUrl: './new-course-item-dialog.component.html',
styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit {
newCourseItem: CourseItem = new CourseItem();
constructor(public dialogRef: MatDialogRef<NewCourseItemDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatInputModule, MatDialogModule, MatButtonModule, MatFormFieldModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
CourseAdminComponent,
NewCourseItemDialogComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
MatDialogModule,
BrowserAnimationsModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule
],
providers: [
AuthService,
DataService
],
bootstrap: [AppComponent],
entryComponents: [
NewCourseItemDialogComponent
]
})
export class AppModule { }
Angular CLI: 7.0.5
Node: 10.7.0
OS: win32 x64
Angular: 7.0.4
... animations, cdk, common, core, material
Package Version
-------------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/build-angular 0.10.5
@angular-devkit/build-optimizer 0.10.5
@angular-devkit/build-webpack 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@angular/compiler 7.0.3
@angular/compiler-cli 7.0.3
@angular/flex-layout 7.0.0-beta.19
@angular/forms 7.0.3
@angular/http 7.0.3
@angular/language-service 7.0.3
@angular/platform-browser 7.0.3
@angular/platform-browser-dynamic 7.0.3
@angular/router 7.0.3
@ngtools/webpack 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1
angular angular-material angular7
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
asked Nov 20 '18 at 21:52
MadMacMadMac
367
1
Have you included the CSS file in your angular.json file?
– user184994
Nov 20 '18 at 21:57
2
Add@import "~@angular/material/prebuilt-themes/indigo-pink.css";to your styles.css if you haven't already.
– SiddAjmera
Nov 20 '18 at 21:59
You guys are the best. Thanks! So obvious I guess, but I realise now that I used angular material in an existing project so didn't have to apply this step. Never again.
– MadMac
Nov 20 '18 at 22:18
add a comment |
Any ideas why the angular material styles are not being applied correctly?
I know there are a lot of questions on this but I can't seem to find one that resolved my problem.
I have used angular material with no problem for several projects but can't seem to figure out what is going on here.
I am probably overlooking something simple but just can't see it. I have just upgraded to angular 7 so it could be related to that.
This is my dialog which just displays in the parent page with weird or no styling. It is doing something as the buttons have changed slightly as you can see compared to the cancel button.
<div>
<h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
<div>
<div>
<mat-form-field>
<mat-label>Title</mat-label>
<input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
<mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
</mat-form-field>
</div>
<div>
<button (click)="this.dialogRef.close()">Cancel</button>
<button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
</div>
</div>
</div>
import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-new-course-item-dialog',
templateUrl: './new-course-item-dialog.component.html',
styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit {
newCourseItem: CourseItem = new CourseItem();
constructor(public dialogRef: MatDialogRef<NewCourseItemDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatInputModule, MatDialogModule, MatButtonModule, MatFormFieldModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
CourseAdminComponent,
NewCourseItemDialogComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
MatDialogModule,
BrowserAnimationsModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule
],
providers: [
AuthService,
DataService
],
bootstrap: [AppComponent],
entryComponents: [
NewCourseItemDialogComponent
]
})
export class AppModule { }
Angular CLI: 7.0.5
Node: 10.7.0
OS: win32 x64
Angular: 7.0.4
... animations, cdk, common, core, material
Package Version
-------------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/build-angular 0.10.5
@angular-devkit/build-optimizer 0.10.5
@angular-devkit/build-webpack 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@angular/compiler 7.0.3
@angular/compiler-cli 7.0.3
@angular/flex-layout 7.0.0-beta.19
@angular/forms 7.0.3
@angular/http 7.0.3
@angular/language-service 7.0.3
@angular/platform-browser 7.0.3
@angular/platform-browser-dynamic 7.0.3
@angular/router 7.0.3
@ngtools/webpack 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1
angular angular-material angular7
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
asked Nov 20 '18 at 21:52
MadMacMadMac
367
Any ideas why the angular material styles are not being applied correctly?
I know there are a lot of questions on this but I can't seem to find one that resolved my problem.
I have used angular material with no problem for several projects but can't seem to figure out what is going on here.
I am probably overlooking something simple but just can't see it. I have just upgraded to angular 7 so it could be related to that.
This is my dialog which just displays in the parent page with weird or no styling. It is doing something as the buttons have changed slightly as you can see compared to the cancel button.
<div>
<h4 mat-dialog-title>New Course Item</h4>
</div>
<div mat-dialog-content>
<div>
<div>
<mat-form-field>
<mat-label>Title</mat-label>
<input type="text" [(ngModel)]="newCourseItem.title" #title="ngModel" matInput required placeholder="Title" name="title"/>
<mat-error *ngIf="title.hasError('required')">This field is required</mat-error>
</mat-form-field>
</div>
<div>
<button (click)="this.dialogRef.close()">Cancel</button>
<button mat-raised-button color="primary" [mat-dialog-close]="newCourseItem" cdkFocusInitial>Add New</button>
</div>
</div>
</div>
import { CourseItem } from './../../../../models/course-item';
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'app-new-course-item-dialog',
templateUrl: './new-course-item-dialog.component.html',
styleUrls: ['./new-course-item-dialog.component.css']
})
export class NewCourseItemDialogComponent implements OnInit {
newCourseItem: CourseItem = new CourseItem();
constructor(public dialogRef: MatDialogRef<NewCourseItemDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatInputModule, MatDialogModule, MatButtonModule, MatFormFieldModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
CourseAdminComponent,
NewCourseItemDialogComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
MatDialogModule,
BrowserAnimationsModule,
MatButtonModule,
MatInputModule,
MatFormFieldModule
],
providers: [
AuthService,
DataService
],
bootstrap: [AppComponent],
entryComponents: [
NewCourseItemDialogComponent
]
})
export class AppModule { }
Angular CLI: 7.0.5
Node: 10.7.0
OS: win32 x64
Angular: 7.0.4
... animations, cdk, common, core, material
Package Version
-------------------------------------------------------------
@angular-devkit/architect 0.10.5
@angular-devkit/build-angular 0.10.5
@angular-devkit/build-optimizer 0.10.5
@angular-devkit/build-webpack 0.10.5
@angular-devkit/core 7.0.5
@angular-devkit/schematics 7.0.5
@angular/cli 7.0.5
@angular/compiler 7.0.3
@angular/compiler-cli 7.0.3
@angular/flex-layout 7.0.0-beta.19
@angular/forms 7.0.3
@angular/http 7.0.3
@angular/language-service 7.0.3
@angular/platform-browser 7.0.3
@angular/platform-browser-dynamic 7.0.3
@angular/router 7.0.3
@ngtools/webpack 7.0.5
@schematics/angular 7.0.5
@schematics/update 0.10.5
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1
angular angular-material angular7
angular angular-material angular7
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
asked Nov 20 '18 at 21:52
MadMacMadMac
367
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
asked Nov 20 '18 at 21:52
MadMacMadMac
367
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
edited Dec 6 '18 at 10:39
Goncalo Peres
1,4541519
1,4541519
asked Nov 20 '18 at 21:52
MadMacMadMac
367
asked Nov 20 '18 at 21:52
MadMacMadMac
367
asked Nov 20 '18 at 21:52
MadMacMadMac
367
367
1
Have you included the CSS file in your angular.json file?
– user184994
Nov 20 '18 at 21:57
2
Add@import "~@angular/material/prebuilt-themes/indigo-pink.css";to your styles.css if you haven't already.
– SiddAjmera
Nov 20 '18 at 21:59
You guys are the best. Thanks! So obvious I guess, but I realise now that I used angular material in an existing project so didn't have to apply this step. Never again.
– MadMac
Nov 20 '18 at 22:18
add a comment |
1
Have you included the CSS file in your angular.json file?
– user184994
Nov 20 '18 at 21:57
2
Add@import "~@angular/material/prebuilt-themes/indigo-pink.css";to your styles.css if you haven't already.
– SiddAjmera
Nov 20 '18 at 21:59
You guys are the best. Thanks! So obvious I guess, but I realise now that I used angular material in an existing project so didn't have to apply this step. Never again.
– MadMac
Nov 20 '18 at 22:18
1
1
Have you included the CSS file in your angular.json file?
– user184994
Nov 20 '18 at 21:57
Have you included the CSS file in your angular.json file?
– user184994
Nov 20 '18 at 21:57
2
2
Add
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; to your styles.css if you haven't already.– SiddAjmera
Nov 20 '18 at 21:59
Add
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; to your styles.css if you haven't already.– SiddAjmera
Nov 20 '18 at 21:59
You guys are the best. Thanks! So obvious I guess, but I realise now that I used angular material in an existing project so didn't have to apply this step. Never again.
– MadMac
Nov 20 '18 at 22:18
You guys are the best. Thanks! So obvious I guess, but I realise now that I used angular material in an existing project so didn't have to apply this step. Never again.
– MadMac
Nov 20 '18 at 22:18
add a comment |
1 Answer
1
active
oldest
votes
The comments from @user18994 and @SiddAjmera answered this.
Step 4: Include a theme
Including a theme is required to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.
For more information on theming and instructions on how to create a custom theme, see the theming guide.
Source:
https://material.angular.io/guide/getting-started
answered Nov 20 '18 at 22:23
MadMacMadMac
367
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%2f53402137%2fangular-material-styles-not-being-applied-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The comments from @user18994 and @SiddAjmera answered this.
Step 4: Include a theme
Including a theme is required to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.
For more information on theming and instructions on how to create a custom theme, see the theming guide.
Source:
https://material.angular.io/guide/getting-started
answered Nov 20 '18 at 22:23
MadMacMadMac
367
add a comment |
The comments from @user18994 and @SiddAjmera answered this.
Step 4: Include a theme
Including a theme is required to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.
For more information on theming and instructions on how to create a custom theme, see the theming guide.
Source:
https://material.angular.io/guide/getting-started
answered Nov 20 '18 at 22:23
MadMacMadMac
367
add a comment |
The comments from @user18994 and @SiddAjmera answered this.
Step 4: Include a theme
Including a theme is required to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.
For more information on theming and instructions on how to create a custom theme, see the theming guide.
Source:
https://material.angular.io/guide/getting-started
answered Nov 20 '18 at 22:23
MadMacMadMac
367
The comments from @user18994 and @SiddAjmera answered this.
Step 4: Include a theme
Including a theme is required to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
If you are not using the Angular CLI, you can include a prebuilt theme via a element in your index.html.
For more information on theming and instructions on how to create a custom theme, see the theming guide.
Source:
https://material.angular.io/guide/getting-started
answered Nov 20 '18 at 22:23
MadMacMadMac
367
answered Nov 20 '18 at 22:23
MadMacMadMac
367
answered Nov 20 '18 at 22:23
MadMacMadMac
367
answered Nov 20 '18 at 22:23
MadMacMadMac
367
367
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%2f53402137%2fangular-material-styles-not-being-applied-correctly%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
Have you included the CSS file in your angular.json file?
– user184994
Nov 20 '18 at 21:57
2
Add
@import "~@angular/material/prebuilt-themes/indigo-pink.css";to your styles.css if you haven't already.– SiddAjmera
Nov 20 '18 at 21:59
You guys are the best. Thanks! So obvious I guess, but I realise now that I used angular material in an existing project so didn't have to apply this step. Never again.
– MadMac
Nov 20 '18 at 22:18