Naming attribute in Angular custom components: with or without hyphen?

Question

I have created an Angular component that have some inputs, such as the following:

@Input('max-length') maxLength: number;

So when I use it from another component I can type this:

<my-component max-length="{{lengthValue}}"></my-component>

or

<my-component [max-length]="lengthValue"></my-component>

Is this compliant with HTML standard?

Maybe I could prefix it with data- to be fully compliant:

@Input('data-max-length') maxLength: number;

So I can use it in the following way:

<my-component data-max-length="{{lengthValue}}"></my-component>

Ok, but what about the Angular best practice that suggests input bindings should not be aliased?