Sunday, October 22, 2023

Example with AutoComplete in Angular

 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).value
    this.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

Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...