Bind component attribute to native input attribute

Question

I am new to Angular 2 and I have the following problem. I am trying to bind a component property to my own input property (maxlength) and I cannot do this.

The code is as follows:

textbox.ts

@Component({ selector: 'icb-textbox', inputs: [ 'placeholder', 'mxlength', 'enabled', 'mandatory', 'description', 'type'], templateUrl: 'Common/Components/Textbox/textbox.html', styleUrls: ['Common/Components/Textbox/textbox.css'] }) export class Textbox { private placeholder: string; private mxlength: number; private enabled: boolean; private mandatory: boolean; private description: string; private type: string; } 

textbox.html

  <input type="text" maxlength="{{mxlength}}" [(ngModel)]="value" placeholder="{{placeholder}}" [disabled]="!enabled"/> 

In the father component:

 <icb-textbox placeholder="Name" mxlength="4" [mandatory]="false" [enabled]="true" description="Put your name"> 

Property placeholder and "disabled" work fine, but I can do maxlength work. I tried with [maxlength], and I get this error: I cannot bind to 'maxlength', since this is not a known property.

Thanks.

Answer 1

use

 [attr.maxlength]= 'your value' 

because by default angular find the property binding. to tell angular to use explicitly, we used this syntax

Answer 2

Use instead

 [attr.maxlength]="someValue" 

or

 attr.maxlength="{{someValue}}" 

to explicitly bind to an attribute instead of a property.

Answer 3

In fact, you can just bind directly to the input maxLength property by wrapping it with an attribute binding (square brackets).

So your HTML will look like this:

 <input type="text" [maxLength]="mxLength"> 

And in your TypeScript file:

 mxLength: string = 4;