I used the ng2SearchPipeModule for an input search, but it's not working. I can't seem to find my error. In my HTML, all my books are within divs. Will typing a book title display all the divs?
Of course, I have imported in app.module.ts Ng2SearchPipeModule and FormsModule.
I am facing two errors:
1 - Property 'filter' does not exist on type 'BookType'.
2 - Nothing is happening in my HTML.
service.ts
export class BookService {
url: string = 'http://henri-potier.xebia.fr/books';
constructor(private http: HttpClient) { }
getBookList(): Observable<BookType> {
return this.http.get<BookType>(this.url);
}
}
component.ts
import { Component, OnInit } from '@angular/core';
import { BookType } from '../models/book-type';
import { BookService } from '../services/book.service';
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
public bookType: BookType;
constructor(private bookService: BookService) { }
ngOnInit(): void {
this.bookService.getBookList().subscribe(data => {
this.bookType = data
});
}
search() {
if(this.bookType.title == "") {
this.ngOnInit();
}else{
this.bookType = this.bookType.filter(res =>{
return res.bookType.title.toLocaleLowerCase().match(this.bookType.title.toLocaleLowerCase());
})
}
}
}
html
<input class="form-control" type="text" name="search" [(ngModel)]="bookType" (ngModelChange)="search()"
placeholder="Rechercher">
<div class="grid-container">
<div class="wrapper" *ngFor="let book of bookType" class="form-group">
<div class="product-img">
<img [src]="book.cover" alt="livre" height="420" width="327">
</div>
<div class="product-info">
<div class="product-text">
<h2>{{book.title}}</h2>
<p>{{book.synopsis}}</p>
</div>
<div class="product-price-btn">
<p>{{book.price | currency: 'EUR'}}</p>
<button type="button" (click)="addBookToCart()">buy now</button>
</div>
</div>
</div>
</div>
interface
export interface BookType {
title: string;
price: number;
cover: string;
synopsis: string;
}