Angular *ngIf check if key exists in map

Question

I have a map that looks like:

let mapToSearch =
{
  'aaa': '123',
  'bbb': '456'
}

and I have a variable:

let keyToFind = 'aaa';

In my HTML template, in an Angular *ngIf block, I want to check if keyToFind matches any key within this map.

Something like JS array.indexOf():

<ng-container *ngIf="mapToSearch.indexOf(keyToFind)">
  Hello world
</ng-container>

Is such a thing possible with maps within a template?

Update (including Solution)

Thanks for all your answers. All your answers are valid for working with a object literal (this was my mistake - I should have declared the map differently in the question).

However, for a ES6 map, I discovered I can use map.has(key) in the template.

Declare map with map.set():

let mapToSearch = new Map();
mapToSearch.set('aaa', '123'};
mapToSearch.set('bbb', '456'};

Template:

<ng-container *ngIf="mapToSearch.has(keyToFind)">
  Hello World
</ng-container>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has

Yes, typically you would call a method inside the .ts file though — Braden Brown, Aug 02 '18 at 16:22

score 9 · Answer 1 · answered Aug 02 '18 at 16:22

9

You can achieve if using following simple approach.

<ng-container *ngIf="mapToSearch[keyToFind]">
  Hello world
</ng-container>

answered Aug 02 '18 at 16:22

Malindu Sandaruwan

1,477
2
13
27

Please mark it if it's the correct answer. It may be helpful to others also – Malindu Sandaruwan Aug 02 '18 at 16:41
This fails if mapToSearch[keyToFind] = 0 or false – sundeepg Sep 07 '21 at 13:36

score 2 · Answer 2 · answered Aug 02 '18 at 16:40

2

You can check if a property is defined in mapToSearch with hasOwnProperty (see this stackblitz):

<ng-container *ngIf="mapToSearch.hasOwnProperty(keyToFind)">
  Hello world
</ng-container>

hasOwnProperty will return true if the property exists, even if the associated value is falsy. This is different from mapToSearch[keyToFind], which will return false in the following cases:

prop: ""
prop: 0

answered Aug 02 '18 at 16:40

ConnorsFan

70,558
13
122
146

How can I check directly from json file and I want to check both key and value in condition ? – Optimist Rohit Sep 22 '21 at 06:14

score 2 · Accepted Answer · answered Aug 02 '18 at 17:56

Be careful of the performance hit you take when supplying an expression and not a primitive to the *ngIf directive. If you supply an expression or function then Angular's digest cycle will have to evaluate the expression every time. To test, add a console.log() statement to a function inside ngIf - *ngIf="showMyElement()" - and watch how many times it gets called when you navigate around your application.

Melindu's answer is pretty good (for your case I would do this) - *ngIf="mapToSearch[keyToFind]"

A good habit to get into is to setup a boolean in your component and update that boolean anytime your collection/object changes. Generally when you have more complex scenarios there aren't too many operations on the page that requires that boolean to be updated. So it's better to track those changes yourself in the component, than it is to let angular reevaluate an expression or function every digest.

app.html

<div *ngIf="keyIsFound"></div>

component.ts

keyIsFound: boolean;
mapToSearch = {};

private checkKey(key: string) {
    this.keyIsFound = this.mapToSearch[keyToFind]
}
// Collection changes
addToMap(newKey: string, newValue: any) {
   this.mapToSearch[newKey] = newValue;
   checkKey(newKey);
}

Marking this as the correct answer - it wasn't quite what I needed but it put me on the right lines. Thanks Ryan! — timray, Aug 03 '18 at 09:23

score 0 · Answer 4 · answered Aug 02 '18 at 16:22

0

<ng-container *ngIf="mapToSearch.aaa === '123'">
  Hello world
</ng-container>

if mapToSearch doesn't define aaa, then the result will be value undefined

answered Aug 02 '18 at 16:22

Rich Duncan

1,845
1
12
13

Chellappan வ · Answer 5 · 2018-08-02T16:40:18.620

0

Since Your Data is Object You can Use keyvalue If you are using angular 6.1

<div *ngFor="let key of mapToSearch | keyvalue">
<ng-container *ngIf="key.key==keyToFind">
Hello world
</ng-container>
</div>

If your data is array then you can use method to return the data

html

 <ng-container *ngIf="KeyToFind(keyToFind)">
      Hello world
    </ng-container>

ts

KeyToFind(ktf){
 return this.mapToSearch.map(data=>data[ktf]; }).indexOf(ktf);
}

edited Aug 02 '18 at 16:40

answered Aug 02 '18 at 16:23

Chellappan வ

23,645
3
29
60

I believe you have a typo keyToFind needs to be changed to KeyToFind. Or vice versa – Braden Brown Aug 02 '18 at 16:26

score 0 · Answer 6 · answered Aug 02 '18 at 16:41

You can do the following

<ng-container *ngIf="mapToSearch[keyToFind]"></ng-container>

Or, you can write a function in the component:

<ng-container *ngIf="isKeySet(mapToSearch, keyToFind)"></ng-container>

public isKeySet(obj: any, key: string): boolean {
    return key in obj;
}

Or, you could write a pipe:

<ng-container *ngIf="mapToSearch | isKeySet:keyToFind)"></ng-container>

@Pipe({name: 'isKeySet'})
export class IsKeySetPipe implements PipeTransform {
     public transform(value: any, key?: string) {
         return key in value;
     }
}

Angular *ngIf check if key exists in map

6 Answers6