How to remove base-href from a external link in angular?

Question

From my database i am getting the information about organizations. Here is the interface structure for organizations:

interface IOrganization {
  id: number;
  name: string;
  url: string;
  createdAt: Date;
}

now i want to display them like this:

<div *ngIf="isloading; else content">
  <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
</div>

<ng-template #content>
  <mat-tab-group>
    <mat-tab label="Organizations List" >
      <mat-card 
        class="example-large-box mat-elevation-z4"
        *ngFor="let org of organizations"
      >
        <mat-nav-list>
          <a mat-list-item href="{{ org.url }}"> {{ org.name }} </a>
        </mat-nav-list>
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</ng-template>

Unfortunently link is not working. Whenever i do mousehover on the link, i am getting the information including the base href.

Let say my organization link is www.google.com. and whenever someone click on then user should redirect to the organizations. But i am getting something like this whenever i click on the links.

http:// localhost:4200/organizations/www.google.com

How can i get rid of from the base href from my links so that user can easily go to google.com while he click on the links?

Answer 1

Ah i got the answer:

<a mat-list-item [attr.href]="'//'+ org.url "> {{ org.name }} </a>

This line of code solves the problem. for more detail please click on this link

Answer 2

The problem is that Angular is treating the URL www.google.com as a relative link and appending it to the current route as if it exists on the site.

You have to use an absolute link, like http://www.google.com to actually go to that site instead of appending it to the current route.