CODEWITHSUNDEEP
angularangular-materialmaterial-design
Mohammad Fareed
Mohammad Fareed

Reputation: 1972

Angular 6 matInput styles are not working

Installed Material in my Angular project

but the styles are not working propery.

using the below packags in my application

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.2.0",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "6.0.1",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@swimlane/ngx-datatable": "^15.0.2",
    "angular-bootstrap-md": "^6.1.1",
    "bootstrap": "3.3.5",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ng-drag-drop": "^5.0.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.5.2",
    "zone.js": "^0.8.26"
  },

Style.scss

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Material Module :

@NgModule({
  imports: [
    CommonModule,
    MatButtonModule, MatCheckboxModule,
    MatMenuModule, MatToolbarModule, MatGridListModule,
    MatExpansionModule, MatCardModule,
    MatTooltipModule, MatListModule, MatTableModule,
    NgxDatatableModule
    // MDBBootstrapModule,
  ],
  exports: [
    CommonModule,
    MatButtonModule, MatCheckboxModule,
    MatMenuModule, MatToolbarModule, MatGridListModule,
    MatExpansionModule, MatCardModule,
    MatTooltipModule, MatListModule, MatIconModule,
    MatTableModule, MatPaginatorModule, MatSortModule,
    MatInputModule, MatDialogModule, MatFormFieldModule,
    NgxDatatableModule, MatSelectModule, MatRadioModule,
    MatDatepickerModule, MatNativeDateModule, MatChipsModule,
    ReactiveFormsModule, FormsModule, MatButtonToggleModule,
    MatTabsModule
    // MDBBootstrapModule,
  ],
  providers: [
    MatDatepickerModule
  ],
  declarations: []
})
export class MaterialModule { }

App Module :

import { MaterialModule } from './material/material.module';

Component :

<input matInput placeholder="email" type="text" formControlName="username">

Upvotes: 0

Views: 240

Answers (1)

Abhishek
Abhishek

Reputation: 1778

I think you need to import BrowserAnimationsModule.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  imports: [BrowserAnimationsModule],
})

Upvotes: 1

Related Questions