Displaying of image based from the if statement in typescript

I want to display on my html what should be the image based from my if statement.

On my Typescript:

styleArray = ["Solitary", "Visual","Auditory","Logical","Physical","Social","Verbal",];
for(var i=0; i <= this.styleArray.length -1 ; i++){
        if (this.arrayTest[0].style == this.styleArray[i]){
          this.styles = [
            { src: './assets/img/'+ this.styleArray[i] + '.png',
              button: this.styleArray[i] + 'InstructionPage()'},
         console.log("First: " + this.styleArray[i]);


On my HTML:

       <ion-col width-25 >
                <ion-card class="card-5 full">
          <img class="list" src="{{this.styles.src}}" (click)="{{this.styles.button}}" />

For example:
I got is “Solitary” , it should display the image and its button on my view.
I’m having an error which is “src” & “button” undefined. - What am I doing wrong?

Parentheses are for outputs. Square brackets are for inputs.


The constructor makes no sense to me. You are looping over something that you don’t care about, because all the necessary information is apparently already in this.arrayTest[0] (which I have no idea how is populated). The button parameter also isn’t going to work as written. Instead, have a click handler that takes an $event parameter, and use that as a discriminator.