First create a component
ng g c autocomplete --flat
.html
import { Component } from '@angular/core';@Component({selector: 'app-autocomplete',templateUrl: './autocomplete.component.html',styleUrls: ['./autocomplete.component.css']})export class AutocompleteComponent {prods=[{"pid":"p001","name":"htc","price":8000},{"pid":"p002","name":"sony","price":40000},{"pid":"p003","name":"hp","price":46000},{"pid":"p004","name":"samsung","price":18000}];res : any[] = [];filterprods(event:Event){let autocomplete=(event.target as HTMLInputElement).valuethis.res=this.prods.filter(p=>{return p.name.startsWith(autocomplete);});}}.html<h3>Enter Product Name:</h3><input type="text" (input)="filterprods($event)"><table style="font-size:x-large" border="1" *ngIf="res.length>0"><tr><th>pid</th><th>name</th><th>price</th></tr><tr *ngFor="let p of res"><td>{{p.pid}}</td><td>{{p.name}}</td><td>{{p.price}}</td></tr></table>Output
No comments:
Post a Comment
Thank you for visiting my blog