Stack Overflow Asked by xeraphim on December 30, 2021
I’ve followed the guide on how to install angular material.
First I added it via the cli
ng add @angular/material
In the app.module.ts I’ve added the following additional lines:
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
imports: [
[...],
MatDatepickerModule,
MatNativeDateModule
],
providers: [MatDatepickerModule, MatNativeDateModule],
and in my HTML file I tried to create a datetimepicker
<mat-form-field color="accent" appearance="fill">
<input matInput [matDatepicker]="picker1">
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
Unfortunately, the styling doesn’t work at all. It looks like this:
Am I missing something?
Thanks in advance
edit:
After adding the imports for MatFormFieldModule and MatInputModule it now looks like this which is still different from the tutorial:
To properly show the right styles you will also need to import the MatFormFieldModule and the MatInputModule to your app.module.ts file like so:
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
imports: [
[...],
MatDatepickerModule,
MatNativeDateModule,
MatFormFieldModule,
MatInputModule
],
providers: [MatDatepickerModule, MatNativeDateModule]
You can see that you need them by analyzing the html which consists of <mat-form-field></mat-form-field>
and the <input>
tag has a matInput directive on it.
regards
Answered by sagat on December 30, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP