Search code examples
angulartwitterbind

Angular - Can't bind to 'property' since it isn't a known property of 'a'

I have my two object

{
  "twitter": {
    "username": "potus",
    "postslimit": 10
  },
  "enum": [],
  "publicationdate": "2018-08-27T15:05:55.410Z",
  "_id": "5b8414ec3412b43a34f050cf",
  "clicks": [],
  "active": true,
  "user": " __ ",
  "type": "twitter",
  "__v": 0
}

If I dislay:

<a 
  class="twitter-timeline" 
  data-tweet-limit="2" 
  href="https://twitter.com/{{tw.twitter.username}}">
</a>

everything works fine, but when I'm trying to bind the data-tweet-limit like this:

<a 
  class="twitter-timeline" 
  data-tweet-limit="{{tw.twitter.postslimit}}"
  href="https://twitter.com/{{tw.twitter.username}}">
</a>

I get:

Can't bind to 'tweet-limit' since it isn't a known property of 'a'. ("'"> ]data-tweet-limit="{{tw.twitter.postslimit}}" href="https://twitter.com/{{tw.twitter.username}}">

(I'm loading the twitter timeline like this thread)

Solution

  • Here is a post explaining how to use data attributes

    How to bind to data-* attribute in angular2?

    Basically, you should use the following

    [attr.data-tweet-limit]="tw.twitter.postslimit"