CODEWITHSUNDEEP
angularangular-material
ar099968
ar099968

Reputation: 7547

Angular Material: error "No provider for MatChip"

I want use mat-chips into my component

my-comp.module.html

<mat-form-field class="example-chip-list" #chipList>
      <mat-chip-list>
        <mat-chip *ngFor="let role of user.roles" [selectable]="selectable"
        [removable]="removable"
        (removed)="remove(role)">{{ role.name }}</mat-chip>
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
        <input
          placeholder="New fruit..."
          #fruitInput
          [formControl]="fruitCtrl"
          [matAutocomplete]="auto"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
    </mat-form-field>

my-comp.module.ts

@NgModule({
  declarations: [MyComp],
  imports: [
    CommonModule,
    MatButtonModule,
    MatIconModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatChipsModule,
    MatAutocompleteModule
  ],
  exports: [MyComp]
})
export class MyCompModule { }

but it raise an error:

error-handler.service.ts:11 Error: StaticInjectorError(AppModule)[MatChipRemove -> MatChip]: 
  StaticInjectorError(Platform: core)[MatChipRemove -> MatChip]: 
    NullInjectorError: No provider for MatChip!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:717)
    at resolveToken (core.js:954)
    at tryResolveToken (core.js:898)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
    at resolveToken (core.js:954)
    at tryResolveToken (core.js:898)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:795)
    at resolveNgModuleDep (core.js:17656)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:18345)
    at resolveDep (core.js:18716)

it seem all loaded into the module...

Upvotes: 5

Views: 4584

Answers (1)

Nics1225
Nics1225

Reputation: 236

I ran into this same issue recently, and found the errors written to console to be unhelpful. If your issue is the same as mine, the problem is in your HTML. Change your HTML to this.

<mat-form-field class="example-chip-list" #chipList>
      <mat-chip-list>
         <mat-chip *ngFor="let role of user.roles" [selectable]="selectable"
         [removable]="removable"
         (removed)="remove(role)">
            {{ role.name }}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
         </mat-chip>
        <input
          placeholder="New fruit..."
          #fruitInput
          [formControl]="fruitCtrl"
          [matAutocomplete]="auto"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
</mat-form-field>

The issue was that a mat-icon element with the attribute matChipRemove must be placed inside of the mat-chip element you are pairing it with.

Upvotes: 16

Related Questions