How to match two arrays and change color where an element id matches another id in typescript

by

Issue

I have two dynamically generated passion arrays from NodeJS MongoDB and socket.io server and I know the source may not be important but:

passions1:

[{_id: '60a1557f0b4f226732c4597b', name: 'Netflix'},
{_id: '60a1557f0b4f226732c45980', name: 'Music'},
{_id: '60a1557f0b4f226732c45991', name: 'Hiking'}]

passions2:

[{_id: '60a4457fr54646647888876d', name: 'Cooking'},
{_id: '60a1557f0b4f226732c4597b', name: 'Netflix'},
{_id: '60a1557f0b4f226732c45997', name: 'Swimming'}]

Using naked eyes one can tell that the object {_id: '60a1557f0b4f226732c4597b', name: 'Netflix'} exists on both arrays

How do you output or recreate a new array with the existing objects e.g Netflix in bold using angular?

My code:

<div *ngFor"let passion of passions1">
<span>{{passion.name}}<span>
<!--
I'm stuck here ..... 
<span *ngIf"passion.name  passion[]">{{passion.name}}<span>
 -->
</div>

Any answer typescript / JavaScript would be of great help

Thanks in advance.

Solution

You can use the NgStyle directive for achieving this in the following way,

In your component.html file,

<div *ngFor"let passion of passionObject">
    <span [ngStyle]"{'font-weight': getFontWeight(passion.name)}">{{passion.name}}</span>
</div>

In your component.ts file, define function getFontWeight that accepts a single parameter of type string as follows,

getFontWeight(passionName) {
    for (let i  0; i < this.arrayOfPassions.length; i++) {
      if (passionName  this.arrayOfPassions[i]['name']) {
        return 'bold';
      }
    }
    return 'normal';
  }

StackBlitz Demo

Answered By – thisdotutkarsh

Leave a Comment