Angular 7 - Set variable click event with *ngFor property

Question

I would like to set different methods to be called at the (click) event. I created an array of dictionaries in the ts-File:

headerElements = [
{
  descriptor: "Name",
  icon: "/assets/imgs/name-32.png",
  cursor: "default",
  event: "null"
},
{
  descriptor: "Price",
  icon: "/assets/imgs/description-32.png",
  cursor: "pointer",
  event: "orderByPrice()"
},
{
  descriptor: "Link",
  icon: "/assets/imgs/timer-32.png",
  cursor: "default",
  event: "null"
},
{
  descriptor: "Datum",
  icon: "/assets/imgs/timer-32.png",
  cursor: "pointer",
  event: "null"
}
];

The orderByPrice-Method looks like this:

  orderByPrice() {
    this.isSortedAsc = !this.isSortedAsc;
    const direction = this.isSortedAsc ? "desc" : "asc";
    this.gearPieces = this.gearService.getGearComponentsOrderByPrice(direction);
  }

I call it like this in the html-File:

<table class="table table-dark">
  <thead>
    <tr>
      <th *ngFor="let header of headerElements">
        <img src={{header.icon}} width="32" height="32" style="cursor: {{header.cursor}};" (click)="{{header.event}}"/>{{header.descriptor}}
      </th>
    </tr>
  </thead>
</table>

Unfortunately, setting a specific method to be called on (click) gives me this error:

Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{header.event}}]

Is it even possible, to accomplish this?

Saddam Pojee · Accepted Answer · 2018-12-09 11:56:12Z

1

One of the easy solution will be (If headerElements variable data is not retrieved from server and is locally defined):

Change headerElements.event as follows:

headerElements = [
{
  descriptor: "Name",
  icon: "/assets/imgs/name-32.png",
  cursor: "default",
  event: () => {return this.test1();}
},
{
  descriptor: "Price",
  icon: "/assets/imgs/description-32.png",
  cursor: "pointer",
  event: () => {return null;}
},
{
  descriptor: "Link",
  icon: "/assets/imgs/timer-32.png",
  cursor: "default",
  event: () => {return null;}
},
{
  descriptor: "Datum",
  icon: "/assets/imgs/timer-32.png",
  cursor: "pointer",
  event: () => {return this.test2('It works!');}
}
];

Also, modify HTML click event as follows:

(click)='value.event()'

answered Dec 9, 2018 at 11:56

Saddam Pojee

1,59613 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Ranjan · Accepted Answer · 2018-12-14 18:37:36Z

0

Update

Instead of function names, you can directly attach the function references to the event prop in your object. So if you have a method:

orderByPrice() {
    console.log("order by price called");
}

attach the references like:

headerElements = [
  {
    descriptor: "Price",
    icon: "/assets/imgs/description-32.png",
    cursor: "pointer",
    event: this.orderByPrice //<---- assign the actual reference of the function
   },
   .
   .
]

Old answer (I don't know what was I thinking)

You can create reference for the methods in your class. Something like:

orderByPrice = () => {
    console.log("order by price called");
}

Use the function references for assigning to event to header elements instead of their names

The create your object like:

headerElements = [
  {
    descriptor: "Name",
    icon: "/assets/imgs/name-32.png",
    cursor: "default",
    event: null
  },
  {
    descriptor: "Price",
    icon: "/assets/imgs/description-32.png",
    cursor: "pointer",
    event: this.orderByPrice //<---- assign the actual reference of the function
  },
  {
    descriptor: "Link",
    icon: "/assets/imgs/timer-32.png",
    cursor: "default",
    event: null // <-- as described in comments have it falsy, actual null
  },
  {
    descriptor: "Datum",
    icon: "/assets/imgs/timer-32.png",
    cursor: "pointer",
    event: null
  }
];

Have your HTML like:

  <th *ngFor="let header of headerElements">
    <img src={{header.icon}} width="32" height="32" style="cursor: {{header.cursor}};" (click)="header.event && header.event()"/>{{header.descriptor}}
  </th>

Edit

(Based on the comments)

This part contains checks and explanations if it is correct to have a variable in an angular class referencing a function.

I checked the component instance when we add a variable as a function reference rather than adding a named function in the class.

So, When a named function is added it appears in the prototype of the component instance. But if I have a variable reference to the function then the variable(so the function) appears directly in the component instance(this means code duplication).

To avoid this, we can add the function to the prototype of the class.

  AppComponent.prototype['orderByPrice'] = (): void => {
    console.log("order by price called");
  }

I couldn't find any other differences. I am open to suggestions, counter questions and correcting my mistake if this is not correct.

Thanks!

edited Dec 14, 2018 at 18:37

answered Dec 9, 2018 at 11:35

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

9 Comments

Christian Vincenzo Traina Over a year ago

header.event evaluates to true since it's string

Christian Vincenzo Traina Over a year ago

And btw it's not correct because that's not how Angular methods are defined

Ashish Ranjan Over a year ago

@CristianTraìna: Right! let me rectify thtis.

Christian Vincenzo Traina Over a year ago

I also add that if he/she receives the object from the server, he can map strings to functions explictly, maybe with a switch-case

Christian Vincenzo Traina Over a year ago

And, the last thing, is that you can use the elvy operator header?.event(). I had written my own answer but since you were faster I deleted it, so let's integrate :)

|

Collectives™ on Stack Overflow

Angular 7 - Set variable click event with *ngFor property

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related