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

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>

62 thoughts on “How to apply styles and text to only one button when clicked instead of all buttons in Angular 10”

Leave a Comment