0

I have a functional application built with the Angular CLI v-13.2.6 and I just want to add the great features of angular material forms and icons. I am already using the Component decorator in my class therefore I get an error when trying to use NgModule.

My question is, Is there any way to implement Angular/Material with that Component decorator on my class/without NgModule? Or, is there any way to get float-forms without using Angular Material?

I followed all instructions here: https://material.angular.io/guide/getting-started.

install materials -> ng add @angular/material

import component to .ts ->

import { Component, NgModule, OnInit } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';

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

However when run the app I get the following angular error:

N1006 two incompatible decorators on class.

From what I have read I understand that I cannot have 2 decorators on the same class.

This is what is in the existing code and I am not allowed to change it:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pagexx',
  templateUrl: './pagexx.html',
  styleUrls: ['./pagexx.scss']
})
D M
  • 5,769
  • 4
  • 12
  • 27
gustavo galindo
  • 3
  • 1

1 Answers1

2

You should have a bootstrapped module in your application (it's called AppModule by default and can be found at src/app/app.module.ts). You import the feature modules from Material by adding them to the imports array for your default module:

import { FooComponent } from './foo/foo.component';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [
    FooComponent          /* <-- Your components/pages */
  ],
  imports: [
    MatFormFieldModule    /* <-- Any Material imports */
  ]
})
export class AppModule { }

Then you can use the imported feature in your components. You don't have to add anything to your @Component decorator:

@Component({
  selector: 'app-foo',
  template: './foo.component.html',
  styles: []
})
export class FooComponent { }

<p>This is the template for FooComponent.</p>
<mat-form-field>
  <input placeholder="Start typing...">
</mat-form-field>
D M
  • 5,769
  • 4
  • 12
  • 27
  • Hi DM thanks for the guidance now I see that I was adding the code in the wrong file, right into the component instead of src/app/app.module.ts file. – gustavo galindo Mar 25 '22 at 20:57
  • Even after I added the code to the right file, still getting "cannot GET/ ". I realized I was using a 'Material" version not supported for my angular local version. Now I am using import {MatSelectModule} from '@angular/material/select'; for Angular 9 and its Working!! thanks! – gustavo galindo Mar 25 '22 at 21:14