title: Make entire DIV a link in angular 7
body: <p>How do I make the entire DIV clickable and link to the desired location?</p>
  
  <p>In a large angular/sitecore project, I have this component:</p>
  
  <pre><code>//** LIBRARIES */
  import { Component, OnInit, Input } from '@angular/core';
  import { ComponentRendering, TextField, RichTextField, ImageField } from '@sitecore-jss/sitecore-jss-angular';
  
  //** MODELS */
  import { ILink } from '../../models/ILink';
  import { DtoModel, DtoMessageCodeEnums } from '../../models/Dto.models';
  
  //** SERVICES */
  import { ErrorHandlingService } from '../../services/error.handling.service';
  
  @Component({
      selector: 'app-card',
      templateUrl: './card.component.html',
      styleUrls: ['./card.component.scss']
  })
  
  export class CardComponent implements OnInit {
      //** ATTRIBUTES */
      @Input() rendering: ComponentRendering;
      //** PROPERTIES */
      public header: TextField;
      public text: RichTextField;
      public image: ImageField;
      public links: ILink[];
      public hasChildren: boolean;
      public data: any;
      public anchorCaption: string;
      public anchorUrl: string;
      //** CONSTRUCTOR */
      constructor(private _errorHandlingService: ErrorHandlingService) { }
  
      //#region BASE METHODS
      ngOnInit() {
          //** Init */
          let initDataBindingsDto = this._initDataBindings();
          if (initDataBindingsDto.code !== DtoMessageCodeEnums.Success) this._errorHandlingService.logExceptionDto(initDataBindingsDto);
          }
      //#endregion BASE METHODS
  
      //#region METHODS
      private _initDataBindings(): DtoModel&lt;boolean&gt; {
          /** Init */
          let result = new DtoModel&lt;boolean&gt;('CardComponent', '_initDataBindings');
          try {
              //** ** Capture the GraphQL Data */
              this.data = this.rendering.fields.data;
              if (!this.data || !this.data.datasource) return result.rebase(DtoMessageCodeEnums.GeneralCritical, 'Unable to capture GraphQP data object.');
  
              //** Bind Items */
              this.header      =  this.data.datasource.header &amp;&amp; this.data.datasource.header.jss || { value: '[No Header Data]'};
              this.text        = this.data.datasource.text &amp;&amp; this.data.datasource.text.jss      || { value: '[No Text Data]'};
              this.image       = this.data.datasource.image &amp;&amp; this.data.datasource.image.jss    || { value: { src: '' } };
              this.hasChildren = this.data.datasource.hasChildren;
              this.links       = this.data.datasource.links;
  
              //** Flag Success */
              result.success(true);
          } catch (error) {
              this._errorHandlingService.logException(error, 'CardComponent', '_initDataBindings');
          }
  
          //** Return result */
          return result;
      }
      //#endregion METHODS
  }
  </code></pre>
  
  <p>And this HTML:</p>
  
  <pre><code>&lt;mat-card&gt;
      &lt;img mat-card-image *scImage="image"&gt;
      &lt;mat-card-content class="card-content"&gt;
          &lt;h2 *scText="header"&gt;test&lt;/h2&gt;
          &lt;div class="card-text" *scRichText="text"&gt;&lt;/div&gt;
          &lt;div class="card-links"&gt;
             &lt;!-- This does not work: --&gt;
              &lt;a *scLink="link.link.jss"&gt;
                  &lt;div class="card-link-container" *ngFor="let link of links"&gt;
                      &lt;a *scLink="link.link.jss" class="card-link"&gt;&lt;/a&gt;
                      &lt;span class="card-arrow" ng-href="link.link.jss"&gt;&lt;mdb-icon fas icon="angle-right"&gt;&lt;/mdb-icon&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/mat-card-content&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>As a newbie, I am trying to figure out how to make the entire <code>div class="card-link-container"</code> clickable, with everything that's inside of it?</p>
  
  <p>PS: The posted HTML does not work. I tried attaching <code>*ng-href</code>, but I get errors when I attach it to elements. I am wondering if I can somehow add a function to the component (or a method?) and bind it to an <code>*ng-click</code> event? I am grateful for any suggestions, as I am trying to learn angular.</p>