CODEWITHSUNDEEP
angularangular-material
Alkapoun
Alkapoun

Reputation: 21

Angular MatInput css

I’m using Material on an Angular project.

All the Material components I use work except matInput.

I import the component well and I have the impression that it is well detected as such but its css is not taken into account.

import { MatInputModule } from '@angular/material/input';
import { NgModule } from '@angular/core';
import { MatButtonModule } from "@angular/material/button";
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';


@NgModule({
  declarations: [],
  imports: [],
  exports: [
    MatButtonModule,
    MatInputModule,
    MatFormFieldModule,
    MatSlideToggleModule
  ]
})
export class MaterialModule {
}

_

    <form fxLayout="column" fxLayoutGap="1rem">
        <input type="text" mat-input />
        <input matInput>

        <button mat-flat-button>button</button>
    </form>

enter image description here

Mat Button work but Mat Input no.

Upvotes: 2

Views: 605

Answers (1)

progm
progm

Reputation: 2858

Firstly you need to add any theme in styles.scss file. For example:

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

After this you should use matInput with <mat-form-field> tag. For example:

<mat-form-field>
    <input type="text" matInput />
</mat-form-field>

Quote from documentation:

matInput is a directive that allows native and elements to work with <mat-form-field>.

Upvotes: 0

Related Questions