Change label class to active after angular http request

Question

I have a component of the material design bootstrap that after an http request it is filled in, the problem is that it does not change to the "active" class, having the result of the photo.

          <div class="md-form form-lg">
            <input type="text" id="form2" value="{{cliente.whatsapp}}" class="form-control">
            <label for="form2">Whatsapp</label>
          </div>

If I try to change the label class="active", I still can’t get the result of the label at the top, how can I fix this?

<label class="active" for="form2">Whatsapp</label> doesn’t work

I must apply the active class when it has value in the input.

Answer 1

You could use the ngClass

it has the following syntax ngClass="{classe: condicao}"

<div class="md-form form-lg">
            <input [ngClass]="{active: cliente.whatsapp}" type="text" id="form2" value="{{cliente.whatsapp}}" class="form-control">
            <label for="form2">Whatsapp</label>
</div>