Angular - Can't bind to href

Question

I am trying to make a div in angular become clickable and redirect the user to a webpage. When I try and use ng-href, my application wont even load, leading me to believe I have got it wrong! I cant seem to find an answer anywhere, so, here we go...

I get the error:

'Can't bind to 'ng-href' since it isn't a known property of 'a'. ("

my HTML:

    <div *ngIf="showInsightContainer" class="EngagementOverview-Container">
    <a ng-href="{{ insightUrl }}"> </a>

  <p class="EngagementOverview-Description"> {{ insightAreaName || translate }} </p>
</div>

My JS code:

 public insightId = '';
 public insightUrl = '';

          this.insightId = this.engagementService.currentInsightId;

          this.insightUrl = `https://website...${this.insightUrl}/explore/summary`

I havent yet added any CSS to my 'a' , I was planning to make it the same size as my div container and then the whole thing would be clickable, my css for my container:

.EngagementOverview-Container {
  border-top: $border;
  margin-top: 20px;
  padding-top: 20px;
}

Am i being stupid and missing something quite obvious??

Thanks if you can assist me!

Answer 1

I guess you are using Angular and not AngularJS. If yes then in this case, you can use

[href]="URL"

It will work fine. Here URL will be the variable in which you provide the URL of the webpage in your JS code.

Answer 2

Below Code should work

<a href={{insightUrl }}> LinkText </a>

Also use some value for the anchor(LinkText)