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';
}
Answered By - thisdotutkarsh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.