Element binding in Angular-mdl

Question

I'm quite new to Angular and having some trouble achieving element binding. Any help is highly appreciated. Below is the code:

<mdl-textfield floating-label label="Memory" #memory
formControlName="memory"
pattern="[0-9]*" error-ms="Must be a number"
type="text"></mdl-textfield>

<mdl-textfield floating-label label="Size" #size
formControlName="size"
pattern="[0-9]*" error-ms="Must be a number"
max=memory.value/2
type="text"></mdl-textfield>

What I want to achieve is: the max field for the "size" textfield should be assigned with half the value of "memory" textfield. The current implementation doesn't work. Can someone provide some hints on how to achieve this. I was also looking to achieve the same through ngModel concept, but didn't succeed.

Cheers, Rakesh

Answer 1

I could find the solution to the problem above. At first, I changed type to number for both of the fields and called a javascript function for max attribute for "size" field like below.

max={{getMaxSize()}}

This function retrieves the value of "memory" element and returns the computed value.

There might be still better solutions for this. But, as of now I could come up with this.