Hi there, I am new to Angular and JavaScript. Currently, I am working on achieving a specific goal with some data.
data = ['middlename.firstname.lastname','firstname.lastname'];
During the process, I am looping through the .html using the following approach:
<div *ngFor="let x of data">
<p *ngIf="x.indexOf('.')!==1">
{{x.split('.')[1]}}
</p>
</div>
However, I am encountering an issue here. In the data, there is "'middlename.firstname.lastname" where 'middle name' acts as the parent and the rest are children. On the frontend, I display the position 1, which works fine in this case. But in the second data "firstname.lastname", there is no parent specified, so it displays based on the position as "Lastname". My intention is to display the firstname even when there is no parent mentioned.
Below you can find the Stackblitz URL for reference:
https://stackblitz.com/edit/angular-jmdaxg
Present output :
firstname
lastname
expected output :
firstname
lastname