Mixing
ts Property 'filter' does not exist on type '{}'
1
I'm trying to follow Angular Material guide to create a custom filter for autocomplete input text
https://material.angular.io/components/autocomplete/overview
This is what I have
TS
import { Component, OnInit } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map, startWith, filter } from 'rxjs/operators';
(...)
export class AppComponent implements OnInit {
title = 'Your Profile';
displayedColumns: string = ['selected', 'name', 'description', 'pnr'];
dataSource = ELEMENT_DATA;
myControl = new FormControl();
options: any = ['One', 'Two', 'Three'];
filteredOptions: Observable<string>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
}
HTML
<mat-form-field class="full-with-field" hintLabel="(or code)">
<input matInput placeholder="RP oficina/Nombre empresa" [formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
And I'm having an error in the return sentece, the only error I get is
[ts] Property 'filter' does not exist on type '{}'.
As you can see, options is part of an array so I don't know what could happen.
When I'm debugging in Firefox I get the next error message:
Uncaught Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("="(or code)"> <input
matInput placeholder="RP oficina/Nombre empresa"
[ERROR ->][formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocompl"): ng:///AppModule/AppComponent.html@26:7
Can't bind to 'matAutocomplete' since it isn't a known property of 'input'. ("put
matInput placeholder="RP oficina/Nombre empresa"
[formControl]="companyControl" [ERROR ->][matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFo"): ng:///AppModule/AppComponent.html@26:38
There is no directive with "exportAs" set to "matAutocomplete" (" empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete [ERROR ->]#auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [value]=""): ng:///AppModule/AppComponent.html@27:24
Can't bind to 'value' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'value' input, 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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("omplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [ERROR ->][value]="option">
{{option}} </mat-option> </mat-autocomplete> <mat-hint align="end">Para desc"): ng:///AppModule/AppComponent.html@28:54
'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. ("ntrol]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> [ERROR ->]<mat-option
*ngFor="let option of filteredOptions | async" [value]="option">
{{option}"): ng:///AppModule/AppComponent.html@27:49
'mat-autocomplete' is not a known element:
1. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""RP oficina/Nombre empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
[ERROR ->]<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions "): ng:///AppModule/AppComponent.html@27:6
at syntaxError (compiler.js:1021)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14851)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24570)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24557)
at compiler.js:24500
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24500)
at compiler.js:24410
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)
syntaxError @ compiler.js:1021
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14851
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:24570
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:24557
(anonymous) @ compiler.js:24500
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:24500
(anonymous) @ compiler.js:24410
then @ compiler.js:1012
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:24409
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:24369
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_NGCC__ @ core.js:14376
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:14559
./src/main/angular/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
angular typescript rxjs
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
add a comment |
1
I'm trying to follow Angular Material guide to create a custom filter for autocomplete input text
https://material.angular.io/components/autocomplete/overview
This is what I have
TS
import { Component, OnInit } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map, startWith, filter } from 'rxjs/operators';
(...)
export class AppComponent implements OnInit {
title = 'Your Profile';
displayedColumns: string = ['selected', 'name', 'description', 'pnr'];
dataSource = ELEMENT_DATA;
myControl = new FormControl();
options: any = ['One', 'Two', 'Three'];
filteredOptions: Observable<string>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
}
HTML
<mat-form-field class="full-with-field" hintLabel="(or code)">
<input matInput placeholder="RP oficina/Nombre empresa" [formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
And I'm having an error in the return sentece, the only error I get is
[ts] Property 'filter' does not exist on type '{}'.
As you can see, options is part of an array so I don't know what could happen.
When I'm debugging in Firefox I get the next error message:
Uncaught Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("="(or code)"> <input
matInput placeholder="RP oficina/Nombre empresa"
[ERROR ->][formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocompl"): ng:///AppModule/AppComponent.html@26:7
Can't bind to 'matAutocomplete' since it isn't a known property of 'input'. ("put
matInput placeholder="RP oficina/Nombre empresa"
[formControl]="companyControl" [ERROR ->][matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFo"): ng:///AppModule/AppComponent.html@26:38
There is no directive with "exportAs" set to "matAutocomplete" (" empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete [ERROR ->]#auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [value]=""): ng:///AppModule/AppComponent.html@27:24
Can't bind to 'value' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'value' input, 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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("omplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [ERROR ->][value]="option">
{{option}} </mat-option> </mat-autocomplete> <mat-hint align="end">Para desc"): ng:///AppModule/AppComponent.html@28:54
'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. ("ntrol]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> [ERROR ->]<mat-option
*ngFor="let option of filteredOptions | async" [value]="option">
{{option}"): ng:///AppModule/AppComponent.html@27:49
'mat-autocomplete' is not a known element:
1. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""RP oficina/Nombre empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
[ERROR ->]<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions "): ng:///AppModule/AppComponent.html@27:6
at syntaxError (compiler.js:1021)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14851)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24570)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24557)
at compiler.js:24500
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24500)
at compiler.js:24410
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)
syntaxError @ compiler.js:1021
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14851
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:24570
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:24557
(anonymous) @ compiler.js:24500
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:24500
(anonymous) @ compiler.js:24410
then @ compiler.js:1012
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:24409
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:24369
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_NGCC__ @ core.js:14376
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:14559
./src/main/angular/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
angular typescript rxjs
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
add a comment |
1
1
1
I'm trying to follow Angular Material guide to create a custom filter for autocomplete input text
https://material.angular.io/components/autocomplete/overview
This is what I have
TS
import { Component, OnInit } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map, startWith, filter } from 'rxjs/operators';
(...)
export class AppComponent implements OnInit {
title = 'Your Profile';
displayedColumns: string = ['selected', 'name', 'description', 'pnr'];
dataSource = ELEMENT_DATA;
myControl = new FormControl();
options: any = ['One', 'Two', 'Three'];
filteredOptions: Observable<string>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
}
HTML
<mat-form-field class="full-with-field" hintLabel="(or code)">
<input matInput placeholder="RP oficina/Nombre empresa" [formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
And I'm having an error in the return sentece, the only error I get is
[ts] Property 'filter' does not exist on type '{}'.
As you can see, options is part of an array so I don't know what could happen.
When I'm debugging in Firefox I get the next error message:
Uncaught Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("="(or code)"> <input
matInput placeholder="RP oficina/Nombre empresa"
[ERROR ->][formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocompl"): ng:///AppModule/AppComponent.html@26:7
Can't bind to 'matAutocomplete' since it isn't a known property of 'input'. ("put
matInput placeholder="RP oficina/Nombre empresa"
[formControl]="companyControl" [ERROR ->][matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFo"): ng:///AppModule/AppComponent.html@26:38
There is no directive with "exportAs" set to "matAutocomplete" (" empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete [ERROR ->]#auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [value]=""): ng:///AppModule/AppComponent.html@27:24
Can't bind to 'value' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'value' input, 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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("omplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [ERROR ->][value]="option">
{{option}} </mat-option> </mat-autocomplete> <mat-hint align="end">Para desc"): ng:///AppModule/AppComponent.html@28:54
'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. ("ntrol]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> [ERROR ->]<mat-option
*ngFor="let option of filteredOptions | async" [value]="option">
{{option}"): ng:///AppModule/AppComponent.html@27:49
'mat-autocomplete' is not a known element:
1. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""RP oficina/Nombre empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
[ERROR ->]<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions "): ng:///AppModule/AppComponent.html@27:6
at syntaxError (compiler.js:1021)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14851)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24570)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24557)
at compiler.js:24500
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24500)
at compiler.js:24410
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)
syntaxError @ compiler.js:1021
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14851
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:24570
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:24557
(anonymous) @ compiler.js:24500
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:24500
(anonymous) @ compiler.js:24410
then @ compiler.js:1012
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:24409
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:24369
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_NGCC__ @ core.js:14376
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:14559
./src/main/angular/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
angular typescript rxjs
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
I'm trying to follow Angular Material guide to create a custom filter for autocomplete input text
https://material.angular.io/components/autocomplete/overview
This is what I have
TS
import { Component, OnInit } from '@angular/core';
import { TemplateRef } from '@angular/core';
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { map, startWith, filter } from 'rxjs/operators';
(...)
export class AppComponent implements OnInit {
title = 'Your Profile';
displayedColumns: string = ['selected', 'name', 'description', 'pnr'];
dataSource = ELEMENT_DATA;
myControl = new FormControl();
options: any = ['One', 'Two', 'Three'];
filteredOptions: Observable<string>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().includes(filterValue));
}
}
HTML
<mat-form-field class="full-with-field" hintLabel="(or code)">
<input matInput placeholder="RP oficina/Nombre empresa" [formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
And I'm having an error in the return sentece, the only error I get is
[ts] Property 'filter' does not exist on type '{}'.
As you can see, options is part of an array so I don't know what could happen.
When I'm debugging in Firefox I get the next error message:
Uncaught Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("="(or code)"> <input
matInput placeholder="RP oficina/Nombre empresa"
[ERROR ->][formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocompl"): ng:///AppModule/AppComponent.html@26:7
Can't bind to 'matAutocomplete' since it isn't a known property of 'input'. ("put
matInput placeholder="RP oficina/Nombre empresa"
[formControl]="companyControl" [ERROR ->][matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFo"): ng:///AppModule/AppComponent.html@26:38
There is no directive with "exportAs" set to "matAutocomplete" (" empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete [ERROR ->]#auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [value]=""): ng:///AppModule/AppComponent.html@27:24
Can't bind to 'value' since it isn't a known property of 'mat-option'.
1. If 'mat-option' is an Angular component and it has 'value' input, 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.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("omplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions | async" [ERROR ->][value]="option">
{{option}} </mat-option> </mat-autocomplete> <mat-hint align="end">Para desc"): ng:///AppModule/AppComponent.html@28:54
'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. ("ntrol]="companyControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete"> [ERROR ->]<mat-option
*ngFor="let option of filteredOptions | async" [value]="option">
{{option}"): ng:///AppModule/AppComponent.html@27:49
'mat-autocomplete' is not a known element:
1. If 'mat-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'mat-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (""RP oficina/Nombre empresa"
[formControl]="companyControl" [matAutocomplete]="auto">
[ERROR ->]<mat-autocomplete #auto="matAutocomplete"> <mat-option
*ngFor="let option of filteredOptions "): ng:///AppModule/AppComponent.html@27:6
at syntaxError (compiler.js:1021)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14851)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24570)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24557)
at compiler.js:24500
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24500)
at compiler.js:24410
at Object.then (compiler.js:1012)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)
syntaxError @ compiler.js:1021
push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14851
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:24570
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:24557
(anonymous) @ compiler.js:24500
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:24500
(anonymous) @ compiler.js:24410
then @ compiler.js:1012
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:24409
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:24369
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_NGCC__ @ core.js:14376
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:14559
./src/main/angular/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
angular typescript rxjs
angular typescript rxjs
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
edited Nov 21 '18 at 17:15
Natalia Gutiérrez
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
asked Nov 21 '18 at 16:35
Natalia GutiérrezNatalia Gutiérrez
458
458
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
Step 1.
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string { const filterValue = value.toLowerCase();
//Use the pipe
return this.options.pipe(filter(option => option.toLowerCase().includes(filterValue)));
}
Step 2.
For the console error
When you use formControl you need to import ReactiveFormsModule
Make sure you imported ReactiveFormsModule in imports array
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
See the docs here
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
add a comment |
0
I think you missed some importing.
For Rxjs 6 try with:
import { filter } from 'rxjs/operators';
For Rxjs 5 try with:
import 'rxjs/add/operator/filter';
I suggest you to install an intellisense in your coder.
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
Oh sorry I forgot to put the imports in the question. The filter import was already added but nothing happens.
– Natalia Gutiérrez
Nov 21 '18 at 16:59
add a comment |
0
You are missing the opening [ in matAutocomplete
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
I don't know how it happened but this is a typo in the question code (since I edited some texts from original code)
– Natalia Gutiérrez
Nov 21 '18 at 17:15
This is a different error altogether. Have a look at this stackoverflow.com/a/53268299/6019563
– Sachin Gupta
Nov 21 '18 at 17:28
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416658%2fts-property-filter-does-not-exist-on-type%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Step 1.
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string { const filterValue = value.toLowerCase();
//Use the pipe
return this.options.pipe(filter(option => option.toLowerCase().includes(filterValue)));
}
Step 2.
For the console error
When you use formControl you need to import ReactiveFormsModule
Make sure you imported ReactiveFormsModule in imports array
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
See the docs here
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
add a comment |
1
Step 1.
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string { const filterValue = value.toLowerCase();
//Use the pipe
return this.options.pipe(filter(option => option.toLowerCase().includes(filterValue)));
}
Step 2.
For the console error
When you use formControl you need to import ReactiveFormsModule
Make sure you imported ReactiveFormsModule in imports array
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
See the docs here
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
add a comment |
1
1
1
Step 1.
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string { const filterValue = value.toLowerCase();
//Use the pipe
return this.options.pipe(filter(option => option.toLowerCase().includes(filterValue)));
}
Step 2.
For the console error
When you use formControl you need to import ReactiveFormsModule
Make sure you imported ReactiveFormsModule in imports array
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
See the docs here
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
Step 1.
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: any): string { const filterValue = value.toLowerCase();
//Use the pipe
return this.options.pipe(filter(option => option.toLowerCase().includes(filterValue)));
}
Step 2.
For the console error
When you use formControl you need to import ReactiveFormsModule
Make sure you imported ReactiveFormsModule in imports array
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
],
See the docs here
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
edited Nov 22 '18 at 6:44
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
answered Nov 22 '18 at 5:55
Ram Chandra NeupaneRam Chandra Neupane
8271623
8271623
add a comment |
add a comment |
0
I think you missed some importing.
For Rxjs 6 try with:
import { filter } from 'rxjs/operators';
For Rxjs 5 try with:
import 'rxjs/add/operator/filter';
I suggest you to install an intellisense in your coder.
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
Oh sorry I forgot to put the imports in the question. The filter import was already added but nothing happens.
– Natalia Gutiérrez
Nov 21 '18 at 16:59
add a comment |
0
I think you missed some importing.
For Rxjs 6 try with:
import { filter } from 'rxjs/operators';
For Rxjs 5 try with:
import 'rxjs/add/operator/filter';
I suggest you to install an intellisense in your coder.
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
Oh sorry I forgot to put the imports in the question. The filter import was already added but nothing happens.
– Natalia Gutiérrez
Nov 21 '18 at 16:59
add a comment |
0
0
0
I think you missed some importing.
For Rxjs 6 try with:
import { filter } from 'rxjs/operators';
For Rxjs 5 try with:
import 'rxjs/add/operator/filter';
I suggest you to install an intellisense in your coder.
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
I think you missed some importing.
For Rxjs 6 try with:
import { filter } from 'rxjs/operators';
For Rxjs 5 try with:
import 'rxjs/add/operator/filter';
I suggest you to install an intellisense in your coder.
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
answered Nov 21 '18 at 16:46
E.TiakeE.Tiake
275
275
Oh sorry I forgot to put the imports in the question. The filter import was already added but nothing happens.
– Natalia Gutiérrez
Nov 21 '18 at 16:59
add a comment |
Oh sorry I forgot to put the imports in the question. The filter import was already added but nothing happens.
– Natalia Gutiérrez
Nov 21 '18 at 16:59
Oh sorry I forgot to put the imports in the question. The filter import was already added but nothing happens.
– Natalia Gutiérrez
Nov 21 '18 at 16:59
Oh sorry I forgot to put the imports in the question. The filter import was already added but nothing happens.
– Natalia Gutiérrez
Nov 21 '18 at 16:59
add a comment |
0
You are missing the opening [ in matAutocomplete
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
I don't know how it happened but this is a typo in the question code (since I edited some texts from original code)
– Natalia Gutiérrez
Nov 21 '18 at 17:15
This is a different error altogether. Have a look at this stackoverflow.com/a/53268299/6019563
– Sachin Gupta
Nov 21 '18 at 17:28
add a comment |
0
You are missing the opening [ in matAutocomplete
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
I don't know how it happened but this is a typo in the question code (since I edited some texts from original code)
– Natalia Gutiérrez
Nov 21 '18 at 17:15
This is a different error altogether. Have a look at this stackoverflow.com/a/53268299/6019563
– Sachin Gupta
Nov 21 '18 at 17:28
add a comment |
0
0
0
You are missing the opening [ in matAutocomplete
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
You are missing the opening [ in matAutocomplete
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
answered Nov 21 '18 at 17:08
Sachin GuptaSachin Gupta
805412
805412
I don't know how it happened but this is a typo in the question code (since I edited some texts from original code)
– Natalia Gutiérrez
Nov 21 '18 at 17:15
This is a different error altogether. Have a look at this stackoverflow.com/a/53268299/6019563
– Sachin Gupta
Nov 21 '18 at 17:28
add a comment |
I don't know how it happened but this is a typo in the question code (since I edited some texts from original code)
– Natalia Gutiérrez
Nov 21 '18 at 17:15
This is a different error altogether. Have a look at this stackoverflow.com/a/53268299/6019563
– Sachin Gupta
Nov 21 '18 at 17:28
I don't know how it happened but this is a typo in the question code (since I edited some texts from original code)
– Natalia Gutiérrez
Nov 21 '18 at 17:15
I don't know how it happened but this is a typo in the question code (since I edited some texts from original code)
– Natalia Gutiérrez
Nov 21 '18 at 17:15
This is a different error altogether. Have a look at this stackoverflow.com/a/53268299/6019563
– Sachin Gupta
Nov 21 '18 at 17:28
This is a different error altogether. Have a look at this stackoverflow.com/a/53268299/6019563
– Sachin Gupta
Nov 21 '18 at 17:28
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416658%2fts-property-filter-does-not-exist-on-type%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
