title: Angular - Can't bind to href
body: <p>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...</p>
  
  <p>I get the error:</p>
  
  <p>'Can't bind to 'ng-href' since it isn't a known property of 'a'. ("</p>
  
  <p>my HTML:</p>
  
  <pre><code>    &lt;div *ngIf="showInsightContainer" class="EngagementOverview-Container"&gt;
      &lt;a ng-href="{{ insightUrl }}"&gt; &lt;/a&gt;
  
    &lt;p class="EngagementOverview-Description"&gt; {{ insightAreaName || translate }} &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JS code:</p>
  
  <pre><code> public insightId = '';
   public insightUrl = '';
  
            this.insightId = this.engagementService.currentInsightId;
  
            this.insightUrl = `https://website...${this.insightUrl}/explore/summary`
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>.EngagementOverview-Container {
    border-top: $border;
    margin-top: 20px;
    padding-top: 20px;
  }
  </code></pre>
  
  <p>Am i being stupid and missing something quite obvious??</p>
  
  <p>Thanks if you can assist me!</p>