How to apply styles and text to only one button when clicked instead of all buttons in Angular 10

Question

So I have an array of links that each have a COPY button that works to copy the text to the clipboard. When clicked, the Copy button is supposed to change its inner text to "Copied!" and the color is also expected to change before a timeout reverts it back to its original state.

The problem is when I click on one button the styles and innerText is applied to all buttons. This is the code:

TS

  copyState = { text: 'copy', color: '' };

onClick() {
    this.copyState.text = 'Copied!';
    this.copyState.color = 'hsl(258, 40%, 30%)';

    setTimeout(() => {
      this.copyState.text = 'Copy';
      this.copyState.color = '';
    }, 5000);
  }
 

An external API generates the Links

HTML:

  <div class="result" *ngFor="let result of Links; index as i">
    <p class="original_link">{{ result.original_link }}</p>

    <div class="new-link">
      <p>{{ result.short_link }}</p>
      <button 
        [ngStyle]="{ 'background-color': copyState.color }"
        [cdkCopyToClipboard]="result.short_link"
        (click)="onClick(i)"
      >
        {{ copyState.text }}
      </button>
    </div>

Answer 1

I think you should consider a different approach to solve this scenario.

<div class="result" *ngFor="let result of Links; index as i">
  <p class="original_link">{{ result.original_link }}</p>

  <div class="new-link">
    <p>{{ result.short_link }}</p>
    <button
      [ngClass]="{'touched': clickedLink?.short_link === result.short_link}"
      (click)="onClick(i)"
    >
      {{ (clickedLink?.short_link === result.short_link)? 'copied': 'copy' }}
    </button>
  </div>
</div>

Then in the component file :

 clickedLink;
  onClick(i) {
    this.clickedLink = this.Links[i];
    setTimeout(() => {
      this.clickedLink = null;
    }, 5000);
  }

and in css add the following class :

.touched {
  background-color: hsl(258, 40%, 30%);
}

Here is a working example :

Working demo