title: Display text on a button click Angular
body: <p>I've created three buttons with ngFor, each button has it own name which is stocked in the array: buttonData[].
  buttonData also contains texts and images.
  What I'm trying to achieve here is when I click on one of my buttons a text and an image appears, each button has its own text and image of course.
  I can't understand why my function doesn't work since I have no error.
  Here is my code:</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FeaturesService} from '../features.service';
  
  @Component({
    selector: 'app-features',
    templateUrl: './features.component.html',
    styleUrls: ['./features.component.css']
  })
  export class FeaturesComponent implements OnInit {
  
    constructor(private featuresService: FeaturesService ) { }
      title = 'Features';
      textprediction: String;
      textrebalancing: String;
      textvisualization: String;
      text = '';
      img = '';
      buttonData = [
        {
          title: 'Prediction',
          description: this.textprediction,
          img: '../../assets/prediction.png'
        },
        {
          title: 'Rebalancing',
          description: this.textrebalancing,
          img: '../../assets/rebalancing.png'
        },
        {
          title: 'Visualization',
          description: this.textvisualization,
          img: '../../assets/visualization.png'
        }
      ];
  
    ngOnInit() {
        this.featuresService.getFeatures().subscribe(value =&gt; {
          console.log(value);
          this.textprediction = value[1].textprediction;
        });
        this.featuresService.getFeatures().subscribe(value =&gt; {
          console.log(value);
          this.textrebalancing = value[2].textrebalancing;
        });
        this.featuresService.getFeatures().subscribe(value =&gt; {
          console.log(value);
          this.textvisualization = value[3].textvisualization;
        });
    }
    onTitleClick(i: number) {
      this.text = this.buttonData[i].description;
      this.img = this.buttonData[i].img;        
    }
  }
  </code></pre>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;tr class="btn-group" *ngFor="let button of buttonData; let i = index"&gt;
    &lt;td&gt;
      &lt;button (click)="onTitleClick(i)"&gt;
      {{button.title}}
      &lt;/button&gt; 
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The three variables textprediction, textrebalancing and textvisualization is some text that I get from my json file.
  I can't understand why it works when I declare my function this way:</p>
  
  <pre><code>  onTitleClick() {
      this.text = this.textprediction;
    }
  </code></pre>
  
  <p>But when I ask my function to go and get it in my array it doesnt work.</p>