<template>
    <lightning-card title="Display Contacts on click Of Button" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <p class="slds-m-bottom_small">
                <lightning-button label="Get Contacts" onclick={handleGetContacts}></lightning-button>
            </p>
           <template if:true={contacts}>
           <template for:each={contacts} for:item=cont>
                <h4 key={cont.Id}>{cont.AccountId}</h4>
                <h4 key={cont.FirstName}>{cont.FirstName}</h4>
                <h4 key={cont.LastName}>{cont.LastName}</h4>
                <h4 key={cont.Email}>{cont.Email}</h4>             
           </template>
           </template>
           <template if:true={error}>
            {errorMsg}
        </template>
        </div>
    </lightning-card>
</template>

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
      </targets>
</LightningComponentBundle>

import {LightningElement,wire,track} from 'lwc';
import getContactList from '@salesforce/apex/LwcController.getContactList';
export default class DisplayContactWhenButtonClick extends LightningElement {
    @track contacts;
    @track errorMsg;

    handleGetContacts(){  // button click event 
        getContactList() // Apex class method
        .then(result =>{
            this.contacts = result;
        })
        .catch(error =>{
            this.errorMsg = error;
        })
    }
}

public with sharing class LwcController {
// Retrive list of contact list
@AuraEnabled
    public static List<Contact> getContactList() {
        return [SELECT Id,AccountId, FirstName,LastName,Email,Phone FROM Contact limit 10];
    }
}