CODEWITHSUNDEEP
angularangular-material
Henrik Hollósi
Henrik Hollósi

Reputation: 223

How do I use MatOptgroup in Angular to implement autocomplete?

I want to implement Autocomplete feature according to this tutorial: https://material.angular.io/components/autocomplete/overview

Problem is that Chrome reports an error:

Uncaught Error: Unexpected directive 'MatOptgroup' imported by the module 'MaterialModule'. Please add a @NgModule annotation.

I have declared NgModule, what do I do now?

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule,
  MatAutocompleteModule,
  MatOptgroup,
  MatOption
} from '@angular/material';

import '@angular/material/prebuilt-themes/deeppurple-amber.css';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    MatAutocompleteModule,
    ReactiveFormsModule,
  ],
  declarations: [],
  imports: [
    MatOptgroup,
    MatOption
  ]
})
export class MaterialModule {}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
  ],
  providers: [],
  bootstrap: [
    AppComponent,
  ],
  schemas: [],
})
export class AppModule { }

Upvotes: 0

Views: 161

Answers (1)

Ploppy
Ploppy

Reputation: 15353

I think I found the issue, why are you importing MatOptgroup and MatOption?

You should remove these imports.

@NgModule({
  exports: [
    ...
  ],
  declarations: [],
  imports: [
    MatOptgroup, // <----- remove this
    MatOption    // <----- remove this
  ]
})

Upvotes: 1

Related Questions