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


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


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


[{_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">
I'm stuck here ..... 
<span *ngIf"  passion[]">{{}}<span>

Any answer typescript / JavaScript would be of great help

Thanks in advance.


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(}">{{}}</span>

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