This is my html
<div class="container">
<form [formGroup]="createForm" (ngSubmit)="onPostCreateTypeFields()" style="width:400px; margin: 0 auto;">
<h1>Fields</h1>
<div class="required-field-block">
<input formControlName="name" type="text" placeholder="Fields" class="form-control">
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
<div class="required-field-block">
<input formControlName="name" type="text" placeholder="Nome" class="form-control">
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
<mat-form-field>
<mat-select placeholder="Type Fields" [(ngModel)]="dataSource" name="field">
<mat-option *ngFor="let field of dataSource">
{{field.name}}
</mat-option>
</mat-select>
</mat-form-field>
<button type="submit" class="btn btn-primary" >Criar</button>
</form>
</div>
This is my component
import { Component, OnInit } from '@angular/core';
import { FieldsService } from '../Services/Fields/fields.service';
import { setTheme } from '../../../node_modules/ngx-bootstrap/utils';
@Component({
selector: 'app-fields',
templateUrl: './fields.component.html',
styleUrls: ['./fields.component.css'],
providers: [FieldsService]
})
export class FieldsComponent implements OnInit {
selectedValue: string;
private operUrl: 'api/Fields';
public dataSource: Model.Itens[];
constructor(private _fieldService: FieldsService) {
setTheme('bs3');
}
ngOnInit() {
this._fieldService
.getAll<Model.Result>()
.subscribe((data: Model.Result) => {
debugger;
this.dataSource = data.itens;
});
}
}
My Model.Result
declare namespace Model{
export interface Result{
error: boolean;
itens: Array<Itens>;
message: string;
}
export interface Itens{
operatorId: string;
name: string;
}
}
this is the error
compiler.js: 215 Uncaught Error: Template parse errors: 'mat-option' is not a known element: 1. If 'mat-option' is an Angular component, then verify that it is part of this module. 2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@ NgModule.schemas' of this component to suppress this message. ("eld > [ERROR - >]
{{field.name}} "): ng: ///AppModule/FieldsComponent.html@31: 10 'mat-select' is not a known element:
How do I resolve this?