HTML
<template>
<lightning-card title="Selected Contacts">
<lightning-input type="number" label="Number of Contacts" onchange={numberHandler}></lightning-input>
<ul>
<template for:each={contacts} for:item="contact">
<li key={contact.id}>
<table>
<tbody>
<tr><td>First Name: {contact.FirstName}</td></tr>
<tr><td>Last Name: {contact.LastName}</td></tr>
<tr><td>Email: {contact.Email}</td></tr>
<tr><td>Phone: {contact.Phone}</td></tr>
</tbody>
</table>
</li>
</template>
</ul>
</lightning-card>
</template>
JavaScript
import { LightningElement, track } from 'lwc';
import getAllContacts from '@salesforce/apex/ContactUtility.getNContacts';
export default class GetContactsViaApexFilterByaNumber extends LightningElement {
@track numberofRecords;
@track contacts;
error;
numberHandler(event){
this.numberofRecords = event.target.value;
this.getContacts();
}
getContacts(){
getAllContacts({numberofcontacts : this. numberofRecords}).then(Response => {this.contacts = Response}).catch(Error=>{
console.log('Error in getting contacts');
this.error=Error;
});
}
}
Apex Class
@AuraEnabled must be used.
The method must be public or global.
The method must be static.
public with sharing class ContactUtility {
@AuraEnabled( cacheable = true )
public static List<Contact> getNContacts(Integer numberofcontacts){
return [SELECT Id, FirstName, LastName, Phone, Email FROM Contact LIMIT : numberofcontacts ];
}
}
