In the template, there are 9 <li> elements, each with a *ngIf condition present.
It is possible that 5 or more of them may return true, but the requirement is to only display the first 4 or less if needed.
Priority is given to the order of the <li>.
An attempt was made using the following:
// Template
<li *ngIf="checkCond(profile.Projects.length != 0)">Example</li>
... and so on...
// Component
shown: number = 0;
public checkCond(value: boolean): boolean {
if (value) {
this.shown += 1;
return this.shown <= 4;
}
else return false;
}
The issue with this approach is that the if (value) continuously fires, resulting in an increment greater than anticipated. Consequently, it ultimately returns false.
It is preferred not to use *ngFor for this scenario.