Angular2 check if object has peoperty inside *ngIf

Question

export interface Element {    
    name: string;   
}

export class Room implements Element {
name: string; 
type:string
}

export class Hall implements Element {
name: string;
}

and my varibale type is like below

selectedElement: Element;

now in html how can I check if the object is having property 'type' or not?

<div *ngIf="selectedElement?.type">
my div
</div>

Günter Zöchbauer · Accepted Answer · 2017-03-31T09:19:22.497

17

I guess this should do what you want:

*ngIf="hasProp(selectedElement, 'type')"

hasProp(o, name) {
  return o.hasOwnProperty(name);
}

edited Mar 31 '17 at 09:19

answered Mar 31 '17 at 09:15

Günter Zöchbauer

623,577
216
2,003
1,567

You can of course put that in a pipe as well to make it more reusable. – Günter Zöchbauer Mar 31 '17 at 09:22
hasProp method returning false all the time. Any guess why? – Pratap A.K Mar 31 '17 at 09:25
I just tried it in the browser console and it works fine. What do you get when you add `console.log(o)` as first line inside `hasProp()`? – Günter Zöchbauer Mar 31 '17 at 09:28
Thanks Gunter. It was my mistake, Its working perfectly. – Pratap A.K Mar 31 '17 at 09:44

score 10 · Answer 2 · answered May 31 '17 at 15:29

10

You can do it simply in the html:

<div *ngIf="selectedElement.hasOwnProperty('type')">
my div
</div>

or

<div *ngIf="selectedElement.hasOwnProperty('type');then 
showMyDiv">...</div>

<ng-template #showMyDiv> 
my div
</ng-template>

answered May 31 '17 at 15:29

Sniper

109
1
3

Using a function like that inside a template is not recommended. On change detection the method will be called each time. Using a pipe like suggested in @yannic his answer would be preferable (see https://stackoverflow.com/a/64928306/1697459). – Wilt Oct 26 '21 at 06:43

score 7 · Answer 3 · edited May 23 '17 at 12:10

7

in addition to what Günter Zöchbauer said:

*ngIf="selectedElement && selectedElement['type']"

edited May 23 '17 at 12:10

Community

1
1

answered Mar 31 '17 at 09:30

El houcine bougarfaoui

35,805
9
37
37

I think this won't recognize `{type: null}` or `{type: 0}` or `{type: ''}` – Günter Zöchbauer Mar 31 '17 at 09:31
yeah it won't recognize only {type: null} or {type: ''} since `type` is `string`. but what he wants to do with `null` and an empty string. – El houcine bougarfaoui Mar 31 '17 at 09:36
Not sure, the question was to check if the object has a specific property, not if it has a value. I'm also not sure when this distinction is important. It depends on the use case I guess. – Günter Zöchbauer Mar 31 '17 at 09:37

score 4 · Answer 4 · answered Nov 20 '20 at 11:02

A pipe would be the most performant option in that case.

Ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'hasProp',
})
export class HasPropPipe implements PipeTransform {
  transform(object: object, prop: string): boolean {
    return object.hasOwnProperty(prop);
  }
}

Template:

<button *ngIf="option | hasProp: 'value'">Yay!</button>

Angular2 check if object has peoperty inside *ngIf

4 Answers4