Angular Material not getting executed in browser

Question

I am designing a UI section using Angular Material but my browser does not reflects the code, specifically <mat-form-field></mat-form-field>. I have tried updating my angular and npm.

I took 3 approaches to solve it but the problem persists:

1.I used the ng update in the terminal which gave me the following result: "We analyzed your package.json and everything seems to be in order. Good work!"
2.npm update which resulted in "found 0 vulnerabilities".
3. I restarted my machine.

Can you give us an stackblitz version of your code cuz we also need to check the NgModule of the app — Vignesh
– Vignesh, Commented Jul 13, 2022 at 1:36
This is the link to my project on stackblitz. add-angular-material-vqlvvs.stackblitz.io — Aishani Shrivastava
– Aishani Shrivastava, Commented Jul 14, 2022 at 9:46

Pavan Jadda · Accepted Answer · 2022-07-14 14:16:17Z

1

Update: There are several issues with your code. I updated dependencies to latest versions and moved template to different for better IDE experience. It works now. Check it in StackBlitz

https://stackblitz.com/edit/add-angular-material-wbuseu

Old Response:

You need import MatFormFieldModule into your NgModule.

NgModule:

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

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    MatFormFieldModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Standalone component (v14 or later):

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [ MatFormFieldModule],
    template: `
        .....
    `,
})
export class AppComponent {}

edited Jul 14, 2022 at 14:16

answered Jul 12, 2022 at 19:09

Pavan Jadda

4,97112 gold badges52 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aishani Shrivastava Over a year ago

I have made the imports but still not able to see Form Fields.

Pavan Jadda Over a year ago

There are several issues with your code. I fixed it, you can see it here. stackblitz.com/edit/add-angular-material-wbuseu

Collectives™ on Stack Overflow

Angular Material not getting executed in browser

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related