Issue
I have a bunch of li
elements and when the user clicks them, it opens a more detailed view of those elements in a different component.
However, it requres TWO clicks to show the data I want to show.
When the user click ONCE the component opens up with the empty view template.
When the user clicks AGAIN it then shows the populated data.
Can I not just put this in one anchor tag that routes me to me detailed view and emits the click event in one?
Is there a preferred method or better way to do this?
<ul>
<li *ngFor="let favorite of sortedFavorites; let i= index">
<a class= 'clickMe' (click)= "openContact($event, i)" routerLink= "/details">
<div *ngIf= "favorite.isFavorite">
<img class="smallImage" onerror="this.onerror=null;this.src='User Icon Small.png';"
src={{favorite.smallImageURL}} />
<h3><img src="Favorite — True.png">{{ favorite.name }}</h3>
<br>
<p>{{ favorite.companyName }}</p>
<hr>
</div>
</a>
</li>
</ul>
EDIT: Some people are suggesting that I use reslove guards to fetch the data before it is populated, but I am only pulling this from a local JSON file and passing it between my components.
Solution
you use click event for both. navigate to details page via programmatically using the router
this.router.navigate(['path']);
whatever process do in openContact() and then redirect on the details page.
add into constructor private router: Router
Answered By – Shailesh Ladumor
Answer Checked By – Clifford M. (AngularFixing Volunteer)