How can I change # by code using interpolation

Question

How can I change #card10 and "VerBoton10" by values ​​of the object?

I can do it in the div texts but not in the places I indicate.

What I want to achieve is to use the names obtained by interpolation in both the HTML and TypeScript codes to avoid having one line per element.

Thank you for your attention.

You can see the https://stackblitz.com/edit/angular-skast9

  <div *ngFor="let card of cards"
    [style.background]="'grey'"
    [style.border]="'1px solid red'"
  >
    <div class="card">
      <div #card10 class="overlay">
        <div>Name: {{ card.name }}</div>
        <br />
        <div>ID: {{ card.id}}</div>
        <br />
        <button  *ngIf="verBoton10"
             (click)="onClickHecho( card.id )"
        >
          Hecho {{ card.name }}
        </button>
      </div>
    </div>
  </div>
  <br>
  <button (click)="reponer()" >
          Reponer botones
        </button>

import { Component,
  Renderer2,
  ViewChild,
  ElementRef, } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  cards = [
    {name: '#card10', id: 10, boton: 'verBoton10'},
    {name: '#card11', id: 11, boton: 'verBoton11'},
    {name: '#card12', id: 12, boton: 'verBoton12'},
    {name: '#card13', id: 13, boton: 'verBoton13'},
    {name: '#card14', id: 14, boton: 'verBoton14'}
];

@ViewChild('card10', { static: false }) card7: ElementRef;

  verBoton10 = true;
  verBoton11 = true;
  verBoton12 = true;
  verBoton13 = true;
  verBoton14 = true;


constructor(
    private renderer: Renderer2) {
    }

onClickHecho(numCard: number) {
    console.log(numCard);
    switch (numCard) {
      case 10:
       this.verBoton10 = false;
       this.renderer.setStyle( this.card7.nativeElement, 'backgroundColor', 'green' );
       break;
      case 11:
       this.verBoton11 = false;
       break;
      case 12:
       this.verBoton12 = false;
       break;
      case 13:
       this.verBoton13 = false;
       break;
      case 14:
       this.verBoton14 = false;
       break;
    }
  }

  reponer(){
    this.verBoton10 = true;
     this.renderer.setStyle( this.card7.nativeElement, 'backgroundColor', 'grey' );
    this.verBoton11 = true;
    this.verBoton12 = true;
    this.verBoton13 = true;
    this.verBoton14 = true;
  }
}

Answer 1

I've kept the last answer for historical purposes.

Now what you want is to make the card green and the button inside disappear when you click on it. Here the updated code: https://stackblitz.com/edit/angular-7xt5gx

There's multiple way to achieve this requirement. If the activation data is needed in the server you have to put it in the model, it'll be like {name: string, id: number, activated: boolean}. But if this data is not needed at the backend you can keep it only in the front (the suggested solution).

  <div *ngFor="let card of cards; let idx=index"
    [style.background]="'grey'"
    [style.border]="'1px solid red'"
  >
    <div class="card">
      <div [ngStyle]="!activeCards[idx] ? {'background-color':'green'} : {'background-color':'grey'}" class="overlay">
        <div>Name: {{ card.name }}</div>
        <br />
        <div>ID: {{ card.id}}</div>
        <br />
        <button  *ngIf="activeCards[idx]" (click)="onClickHecho(idx)">
          Hecho {{ card.name }}
        </button>
      </div>
    </div>
  </div>
  <br>
  <button (click)="reponer()" >
    Reponer botones
  </button>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  cards = [];
  activeCards = [];

  constructor() {
    this.cards = [
      {name: '#card10', id: 10},
      {name: '#card11', id: 11},
      {name: '#card12', id: 12},
      {name: '#card13', id: 13},
      {name: '#card14', id: 14}
    ];
    this.activateAll();
  }

  onClickHecho(idex: number) {
    this.activeCards[idex] = false;
  }

  reponer(){
    this.activateAll();
  }

  activateAll() {
    this.activeCards = this.cards.map(() => true);
  }
}

Answer 2

As i understand, you want to control the activation of the buttons by clicking on card number 10. In the other side, you can control the card 10 appearance only in the html part.

Check this code and tell me : https://stackblitz.com/edit/angular-tluc9y?file=src/app/app.component.html

  <div *ngFor="let card of cards"
    [style.background]="'grey'"
    [style.border]="'1px solid red'"
  >
    <div class="card">
      <div [ngStyle]="!activateButtons && card.id === 10 ? {'background-color':'green'} : {'background-color':'grey'}" class="overlay">
        <div>Name: {{ card.name }}</div>
        <br />
        <div>ID: {{ card.id}}</div>
        <br />
        <button  *ngIf="activateButtons" (click)="onClickHecho(card.id)">
          Hecho {{ card.name }}
        </button>
      </div>
    </div>
  </div>
  <br>
  <button (click)="reponer()" >
    Reponer botones
  </button>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  cards = [
    {name: '#card10', id: 10},
    {name: '#card11', id: 11},
    {name: '#card12', id: 12},
    {name: '#card13', id: 13},
    {name: '#card14', id: 14}
];

activateButtons = true;

onClickHecho(numCard: number) {
    if (numCard === 10 ) {
      this.activateButtons = false;
    }
  }

  reponer(){
    this.activateButtons = true;
  }
}

You can extract !activateButtons && card.id === 10 in another variable like isGreenCard for more readability.