i am new in angular 12, I created a search input and a list of static data, and I decided to write a pipe to filter the data when I search something, So after I added the pipe inside the ngFor I got an error that says : Error: src/app/template/ui/pages/courses/courses.component.html:23:78 - error TS2339: Property 'query' does not exist on type 'CoursesComponent'.
23 <div class="col-12 col-lg-4" *ngFor="let item of data | searchFilter: query ">
~~~~~
src/app/template/ui/pages/courses/courses.component.ts:13:16
13 templateUrl: './courses.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
The error occurs in the template of component CoursesComponent.
So I checked the existing answers here but none speaking about Pipe and NgModel so here's my pipe:
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: 'searchFilterPipe'
})
export class SearchFilterPipe implements PipeTransform {
transform(value: any, args?: any): any {
if(!value) return null;
if(!args) return value;
args = args.toLowerCase();
return value.filter(function(data: any){
return JSON.stringify(data).toLowerCase().includes(args);
});
}
}
Here my view:
<form action="">
<div class="input-group mb-4 border rounded-pill p-1">
<input id="searchInputtwo" type="search" [(ngModel)]="query" placeholder="What're you searching for?" aria-describedby="button-addon3" class="form-control bg-none border-0" >
<div class="input-group-append border-0">
<button id="button-addon3" type="submit" class="btn btn-link text-dark"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="row" id="lessonList">
<div class="col-12 col-lg-4" *ngFor="let item of data | searchFilter: query ">
<div class="card mb-4 mb-lg-0 border-secondary shadow">
<img src="{{item.image}}" alt="Animations CSS modernes" class="card-img-top">
<div class="card-body">
<h5 class="card-title">{{ item.title }}</h5>
<p class="card-text">{{item.text}}</p>
<a href="courses/details/{{item.id}}" class="btn btn-info btn--start ">Démarrer l'apprentissage</a>
</div>
</div>
</div>
Here my Ts file:
import { Component, Input, OnInit, NgModule } from '@angular/core';
import { chapterModel } from 'src/app/core/models/chapter.model';
import { competencesModel } from
'src/app/core/models/competences.model';
import { CourseModel } from 'src/app/core/models/course.model';
import { preriquisiteModel } from
'src/app/core/models/preriquisite.model';
import { teacherModel } from 'src/app/core/models/teacher.model';
import { SearchService } from 'src/app/core/services/search.service';
@Component({
selector: 'app-courses',
templateUrl: './courses.component.html',
styleUrls: ['./courses.component.scss']
})
export class CoursesComponent implements OnInit {
public searchFilter: any = '';
public data:CourseModel[];
constructor(private searchService: SearchService) {
this.data = [
new CourseModel(1,"Créez des animations CSS","Vous allez plonger dans le monde des animations CSS pour donner vie à vos pages web !",
[new chapterModel(1,"coo","text")],false,
[new preriquisiteModel(2,"Programmation JavaScript","Programmation JavaScript","Learn Java Script !")],
[ new competencesModel("Savoir Faire des animations")], [ new teacherModel(52,"Laura DuFont") ],
"assets/images/lessons/css.jpeg"),
new CourseModel(2,"Programmer avec JavaScript","Ce cours est conçu pour vous enseigner les bases du langage de programmation JavaScript.",
[new chapterModel(1,"coo","text")],false,
[new preriquisiteModel(1,"Programmation html/css","Programmation html/css","Learn Html/Css !")],
[ new competencesModel("Savoir le language Java Script")], [ new teacherModel(53,"Will Alexander") ],
"assets/images/lessons/js.jpeg"),
new CourseModel(3,"Les fondamentaux de Swift","Découvrez le développement iOS et réalisez des applications taillées pour l'iPhone et l'iPad !",
[new chapterModel(1,"coo","text")],false,
[new preriquisiteModel(2,"Programmation ","Programmation ","Learn Swift !")],
[ new competencesModel("Savoir programmer pour Iphone et Ipad")], [ new teacherModel(54,"Jamie Sutherland") ],
"assets/images/lessons/swift.jpeg"),
];
}
ngOnInit(): void {
}
searchForm(){
this.searchService.searchAndFilterCourses(this.searchFilter);
console.log(this.searchFilter);
}
}
I took this code from a tutorial of Angular 9 but I don't know if my angular 12 needs a different syntax or not.
My goal is to find a solution for this problem and make the solution available for all possible future victims of this error.
