Percentage mask at angle

Question

How can I make a percentage mask using angular 2+?

I want to apply it to my input:

<input type="text" [(ngModel)]="produto.indice_lucro" name="indicelucro" id="indicelucro" class="form-control">
<label for="indicelucro">Índice de Lucro (%)</label> <i matTooltip="Qual o percentual de lucro que você deseja lucrar com a venda desse produto?" class="fa fa-info-circle informacao" aria-hidden="true"></i>

I thought I’d use a pipe at my value:

<input type="text" value="produto.indice_lucro | percent">

It didn’t work well and I couldn’t find a tutorial that taught percentage.

Answer 1

To use Pipes Angular 6 is required to use the bind correct data. As explained in documentation, the variable value must be a number and the rating used {{ value | percent}}. In your case it would be something like:

<input type="text" [value]="{{ produto.indice_lucro | percent }}">

It is possible to use location and number of houses before and after the comma as well, as property parameter Percent.

b: number = 1.3495;
<p>B: {{b | percent:'4.3-5':'fr'}}</p>
Output: 0 134,950 %