Here's the question at hand:
How can I make links in HTML or TypeScript work properly? I want to include links to external pages within my app. In a user profile, I have links to the social media accounts of that user (e.g. instagram.com/sisterofclara) displayed as follows:
<div class="col-md-12" *ngFor="let currentAccountObject of user.userContact.accounts">
<div class="margin-10-px" >
<div class="col-md-1 font-bold">
<img[src]="getIcon(currentAccountObject.socialAccountType)">
</div>
<div class="col-md-9 font-bold"> {{currentAccountObject.login}}
</div>
</div>
</div>
However, every time I click on a link, it always redirects to `localhost:3000` before the actual link. Why is this happening?
I've tried using an Angular click function with the argument `uri`, like so:
public goToProfile(url) {
window.location.href = url;
}
I've attempted various methods such as clicking directly on the link, using `href={{person.link}}`, the provided function, and even location.replace(uri), but none seem to be working correctly due to the addition of `localhost` at the beginning of the URL. Any insights on this issue?
Edit: Here's the corresponding HTML code snippet:
<div class="row col-md-12 contact">
<div *ngIf="contactTabEditable==false">
<div class="col-md-12 ro-label" align="left">Social media:</div>
<div class="col-md-10 social-media">
<div>
<div class="col-md-12" *ngFor="let currentAccountObject of user.userContact.accounts">
<div class="margin-10-px" >
<div class="col-md-1 font-bold"><img [src]="getIcon(currentAccountObject.socialAccountType)"></div>
<div *ngIf="currentAccountObject.link" class="col-md-9 font-bold">
<a (click)="goToProfile(currentAccountObject.link)"> {{currentAccountObject.login}} </a>
</div>
<!-- <div *ngIf="!showClickableAccount" class="col-md-9 font-bold"> {{currentAccountObject.login}}</div> -->
</div>
</div>
</div>
</div>
</div>
</div>