Can't bind to 'x' since it isn't a known property of 'button'

Ionic Framework ionic-v3
1

Hello everyone.

I’m been struggling for days to dynamically change an attribute of a button with angular binding.
Here is my element
<button [mark]=“mark” (click)=“gotoUser(user?._lat, user?._lon)”>

And when I build I got this error. Can’t bind to ‘mark’ since it isn’t a known property of ‘button’.
This syntax should be perfectly valid in angular and I don’t understand why it’s not working. I try with @Input() as well.

The error disappears if I use [attr.mark] instead, but I cannot change the data after in my component. ( this syntax should be used for conditional attr which it’s not my case I only want to change the value)

2

Unless you have some other directive on that button that is providing a mark property decorated with @Input(), Angular has no idea what to assign to.

How? Where? <button> isn’t your component; I can’t see where you would try to add an Input() property to it.

3

Thanks for your answer rapropos. I try to add input on the page component which contain my button. In this case home.ts . It is possible to do like that ? Or I need to create a new component ?

4

What you trying to do?
For what you need attribute of “mark”?

5

I have different markers on a map with a dynamic popup assign to a marker. So I dynamically set an popup DOM to a marker.
I want to assign an id of marker in the button, so If I click on the button I can get back the marker associated.

So In fact, I just want to update an attribute of the DOM , to get it back later. I can use jquery for that (attr) but I want to do the angular way … :frowning:

6

If you want to do it exactly like [mark]="someMark" then you could create a component marked-button whose template is a standard Ionic button, and whose ts file contans a mark field that you can modify and query.

7

okay thanks you so much Aaron. So there is no way without creating a component !

8

There’s a lot of ways, probably, but I don’t understand your need yet. Why do you need a field other than id? id already exists, no need to do anything fancy to add anything new to the component.

9

It could probably be done with a simple

switch (case)

Function where case is either the buttons Id (following @AaronSterling’s suggestion) or an arbitrary value.
Something like

(click)="switchFunction('button1')"

switchFunction(value: string) {
 switch (value) {
  case 'button1': {
   doThis();
   break;
  }
  case 'button2': {
   doThat();
   break;
  }
 }
}

Simplified here with hardcoded values

10

I think it’s not the best way to do it. You need to create a case for each button. I will prefer handle with data-attribute

11

To do more specific, I could use the field id , but I prefer to reserve it for another purpose because I could use this button several times.

For ex : I often use in html data-attribute for some specific purpose, like adding the id of user or else…

In my case, each HTML popup needs to have the id of the marker on my map. Is it more clear?

12

Inside Ionic-Angular, I would create a provider MarkManager, that managed a Map with keys being the buttion IDs, and values being the marks. Then as long as you make sure each button ID is unique, you can assign or change the marks.

But what I would do for real to solve this problem is that I would design a marked-button component in Stencil that extends the Ionic button component. I have the experience with Stencil to do that though, and you probably don’t (at least not yet). Creation of a provider probably involves the least amount of coding, and it’s an official “Angular way” to solve the problem.

13

As I hinted at above, this can be done with a directive.


@Directive({
  selector: "[marked-button]"
})
export class MarkedButton {
  @Input() mark: string;
  @HostListener('click') onClick() {
    alert("i bear the mark of the " + this.mark);
  }
}

<button marked-button [mark]="'beast'">click me</button>
1 Like
14

Thanks I will try with this ! I found a over solution [attr.data-mark]=“mark” and assign mark dynamically with mark = “someting”

15

thanks, it works fine