Материал MatInputModule не работает угловой 9

Я использую компонент Angular Material https://material.angular.io/components/input/overview но анимация материалов не работает

зависимость пакета

"dependencies": {
"@angular/animations": "~9.1.1",
"@angular/cdk": "^9.2.1",
"@angular/common": "~9.1.1",
"@angular/compiler": "~9.1.1",
"@angular/core": "~9.1.1",
"@angular/forms": "~9.1.1",
"@angular/material": "^9.2.1",
"@angular/platform-browser": "~9.1.1",
"@angular/platform-browser-dynamic": "~9.1.1",
"@angular/router": "~9.1.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"

},

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms';
import {MatInputModule} from '@angular/material/input';
import { MatCardModule} from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatToolbarModule} from '@angular/material/toolbar';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatFormFieldModule} from '@angular/material/form-field';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {PostCreateComponent} from './posts/post-create/post-create.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HeaderComponent } from './header/header.component';
import { PostListComponent } from './posts/post-list/post-list.component';


@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent,
    HeaderComponent,
    PostListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule, MatCardModule,MatButtonModule,MatToolbarModule,MatExpansionModule,MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML:

  <form >

...
...
    <mat-form-field>

      <input matInput type="text" placeholder="Enter Title">

    </mat-form-field>
 .....
....
  </form>

CSS-

mat-card{

  background-color: lavender;
  box-shadow: currentColor;

}
mat-form-field,
textarea{
  background-color: white;
  width: 100%;
  margin: 10px;
}

button{
  background-color: indigo;
  color: ivory;
  margin-left: 10px;
}

person Diptendu Das    schedule 23.04.2020    source источник
comment
Вы добавили CSS?   -  person David    schedule 23.04.2020


Ответы (1)


Пожалуйста, импортируйте MatInputModule в @NgModule декоратор соответствующего модуля следующим образом;

@NgModule({
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
person Abhijit Sinha    schedule 24.04.2020
comment
Хотя он уже импортирован в импорте в исходном вопросе? - person Devinloper; 30.12.2020