Can't bind to 'showQR' since it isn't a known property of 'div'?

Question

I have a div that looks like this

 <div
    class="empower-btn"
    [showQR]="showQR"
    [selectedCoin]="coin"
    [availableAmount]="getCoinAmount()"
    [coinAmount]="getCoinAmount()"
  >stuff</div>

And in my component i declared the properties like this

 showQr;
 coinAmount;
 coin;
 availableAmount;

however i am getting an error of

Can't bind to 'showQR' since it isn't a known property of 'div'?

how can i remove this error? thanks am i binding the property in a wrong way?

score 1 · Answer 1 · answered Oct 30 '21 at 22:00

I think you are missing the basic understanding of using a custom attribute in DOM. We use directives for this. AngularJS has few built in attribute directives like ng-model, ng-class etc. Don't get confused by them. Just because things are abstracted from you doesn't mean it is not implemented.

Please refer to the documentation to understand the concept of directives in detail. Directive AngularJS Documentation

score 1 · Answer 2 · edited Oct 31 '21 at 02:34

Please replace [showQR] with *ng-if or ng-show. ng-if will delete and recreate the div each time showQR changes. ng-Show will keep the div there, but simply hide and show the div. (https://stackoverflow.com/a/19177773/16607579)

Also, you should not add the other variables in this way. Instead can use ng-bind: https://www.w3schools.com/angular/ng_ng-bind.asp

(May need to create a separate html element for each variable)

Can't bind to 'showQR' since it isn't a known property of 'div'?

2 Answers2