Ngif for empty string validation angular 5

Question

I'm struggling to validate an empty string retrieved from a server

It's usually pretty straight forward it's just not working

<div class="ui-g-2 info-txt"
     *ngIf="appointment.Notes !==null || 
     appointment.Notes !== ''">
     <i class="fa fa-commenting-o" aria-hidden="true"</i>
</div>

<div class="ui-g-5 info-txt"
     *ngIf="appointment.Notes !==null ||     
     appointment.Notes !== ''">
     *emphasized text*{{appointment.Notes}}
</div>

<div class="ui-g-7 info-txt"
     *ngIf="appointment.Notes === null || 
     appointment.Notes === ''"
     style="padding-top: 0;">
     no hay notas disponibles
</div>

So I'm checking for a null or string with nothing in it, the problem is its still showing the icon and the empty string

When there is a message inside the no hay..... doesnt show so its working perfectly on that side

Any help greatly appreciated been stuck on this for ages.

Im sure its a obvious I just cant see it

Any chance it's undefined? You can try `*ngIf="appointment.Notes"` which will only be true if `Notes` is not null, undefined, empty string etc — user184994, Nov 01 '18 at 19:17
I suggest that you move that logic into a function so that it can be shared and you can also make it more robust without cluttering up the HTML. Like the above user said you can also check for `undefined` whitespaces `' '` etc — The Muffin Man, Nov 01 '18 at 19:18

nircraft · Answer 1 · 2021-03-14T04:00:46.167

7

You can have double negation to check if value is not undefined/null or Empty. Ex: *ngIf="!!name".

This will prevent all Null, undefined or empty values from showing up.

edited Mar 14 '21 at 04:00

answered Nov 01 '18 at 20:53

nircraft

8,242
5
30
46

score 1 · Accepted Answer · edited Oct 21 '20 at 18:13

1

Shouldn't it be:

appointment.Notes !==null && appointment.Notes !== ''"

You want it to be not null AND not empty, but you're just checking if it's either not null OR not empty, one or the other. Which means, if you have this value:

const name = "";

The *ngIf condition will be true because it is not null.

edited Oct 21 '20 at 18:13

nircraft

8,242
5
30
46

answered Nov 01 '18 at 19:20

David Anthony Acosta

4,766
1
19
19

Legend dude :D . I knew it was something obvious. Thanks alot will accept when the four mins pass – AWGAL Nov 01 '18 at 19:26
You can also try *ngIf(appointment.Notes) which inturn checks both the conditions if I am not wrong – Minu Nov 01 '18 at 21:03

Ngif for empty string validation angular 5

2 Answers2