[Fixed] Implement show more and show less buttons seperately

Issue

I am trying to add a show more and a show less button separately.

I have an ngFor that displays a list of results

<div *ngFor="let item of (showMore ? searchFormData.cities : (searchFormData.cities|slice:0:15)); let i = index;">                
        <div>
            {{ item.name}}
        </div>                
</div>

Then I have 2 button as follows

<button type="button" (click)="showMore">{{'lbl.showMore'|translate}}</button>
<button type="button" (click)="!showMore">{{'lbl.showLess'|translate}}</button>

I know this can be done with one button with (click)="more = !more" but my requirement is to have 2 buttons.

Anyone know how I can go about this?

Solution

You just have to change value of showMore on button click

<button type="button" (click)="showMore = true;">{{'lbl.showMore'|translate}}</button>
<button type="button" (click)="showMore = false;">{{'lbl.showLess'|translate}}</button>