Home / Questions / 434650
Accepted
Aritzbn
Asked: 2022-03-12 03:13:42 +0800 CST 2022-03-12 03:13:42 +0800 CST

Remove an attribute if the variable is not defined

  • 772

I'm trying to omit an attribute with ngIf, or something similar in Angular:

<input type="text" maxlength="5" class="form-control-mat"
    *ngIf="recomendacion!=undefined" [placeholder]="recomendacion" >

This is what I have right now, but instead of omitting the attribute placeholder, it skips the entire element.

Is it possible to apply something similar that works on attributes?

angular

2 Answers

  1. Best Answer

    The directive ngIfmanages whether or not the entire element appears, so the element appears or not depending on the value of recomendacion.

    Below I show how to use recomendacionso that the attribute appears only when the variable is defined:

    <input type="text" maxlength="5" class="form-control-mat"
    [attr.placeholder]="recomendacion" />

    You can refer to the Angular documentation :

    When the expression resolves to nullor undefined, Angular removes the attribute altogether.

    In Spanish:

    When the expression resolves to nullor undefined, Angular removes the attribute entirely.

    • 6

  2. You can condition an attribute within it.

    <input type="text" maxlength="5" class="form-control-mat" [placeholder]="recomendacion ? recomendacion : null" >

    In the example that I give you, what we do is set the attribute placeholderif there is a recommendation, otherwise we return a null, which disables the attribute.

    For the conditional, in case you have never used them:

    Condición (if = ?) caso afirmativo (else = :) caso negativo

    The best thing about this is that it lets you condition the value of the attribute, very useful for working with css, classes and element states.

    • 5