CODEWITHSUNDEEP
angularimagetypescriptbuttonngfor
Lucie Schaffner
Lucie Schaffner

Reputation: 35

display images and text from ngfor buttons angular

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>

Upvotes: 0

Views: 3298

Answers (1)

rmcsharry
rmcsharry

Reputation: 5562

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

Upvotes: 1

Related Questions