0

I'm trying to create three buttons and each button displays an image and a text. But it doesn't work and I can't understand why.

What I'm trying to achieve is that when I click on one of my three buttons an image and text appears. This image and text is unique for each button and I have to use ngFor.

Here is my code:

component.ts

export class FeaturesComponent implements OnInit {
    title = 'Features';

    buttonData = [{
        title: 'Prediction',
        description: 'text',
        img: '../../assets/prediction.png'
    },
    {
        title: 'Rebalancing',
        description: 'text',
        img: '../../assets/rebalancing.png'
    },
    {
        title: 'Visualization',
        description: 'text',
        img: '../../assets/visualization.png'
    }];
}

component.html

<h1>{{ title }}</h1>
<tr class="btn-group" *ngFor="let button of buttonData">
  <td>
    <button (click)="button.description; button.img">{{button.title}}</button>
  </td>
</tr>
rmcsharry
  • 5,363
  • 6
  • 65
  • 108
Lucie Schaffner
  • 35
  • 4
  • 9

1 Answers1

1

I don't mean to be rude, but I would advise you to do the Tour of Heroes tutorial from the angular docs here.

Your template is wrong. Here is an example of what I think you are trying to achieve:

component.html

<h1>{{ title }}</h1>

<tr class="btn-group" *ngFor="let button of buttonData; i = index">
 <td>
  <button (click)="onButtonTitleClicked(i)">
    {{button.title}}
    <ng-template *ngIf="isButtonTitleClicked[i]">
       <p>{{button.description}}</p>
       <img src="{{button.img}}">
    </ng-tempalte>
  </button>
 </td>
</tr>

component.ts

isButtonTitleClicked: Array<boolean>;

public onButtonTitleClicked(i: number): void {
   # whatever you want to happen when button is clicked
   this.isButtonTitleClicked[i] = true;
}

Since you have more than one button being created by the ngFor, you need to know which button is clicked. Hence we add 'i = index' to the ngFor, so that we have a way to identify which button is clicked.

In the component we create an array of booleans, so that we can store the true/false state of each button (clicked or not clicked). So now when the button is clicked we passed the index of that button to the click method and set the value in the array.

The ngIf will only display the template for those buttons where that member of the array is set to true.

This is a very rudimentary way to do this. Think about how does the user set the value back to false? Is another click setting it hidden again - if so better to do this:

this.isButtonTitleClicked[i] = !this.isButtonTitleClicked[i];

since this will just not (reverse) the value on each click.

I would also recommend looking at this question and the various answers about putting an img on a button.

NOTE

Maybe not a good idea to call these 2 the same name:

onButtonTitleClicked(i) <- this is calling the method

onButtonTitleClicked[i] <- this is a reference to element i of the array

rmcsharry
  • 5,363
  • 6
  • 65
  • 108
  • Thank you very much for your help – Lucie Schaffner Mar 19 '18 at 12:23
  • I've already done the Tour of Heroes tutorial but maybe I should do it again My major problem is coding functions and it's why I try to use as much as possible the html file I've already tried to dysplay an image using a function and I couldn't do it properly even after 100 of researchs on internet – Lucie Schaffner Mar 19 '18 at 12:28
  • Sorry if I wans't specific enough What I'm trying to achieve is that when I click on one of my three buttons. An image and text appears. This image and text is unique for each button and I have to use ngFor. – Lucie Schaffner Mar 19 '18 at 12:42
  • Ok, then you just need to use ngIf and set a flag, I will udpate my code to show what I mean. – rmcsharry Mar 19 '18 at 13:13