title: Angular - Hammerjs - Load html content in swipe action
body: <p>The following swipe action loads three images in the template. They currently work fine but I would like to change two of the images with a functional Google Maps iframe and a loop of checkboxes and names. </p>
  
  <p>I tried replacing the image links with html and changed the <code>&lt;img [src]="avatar.content" [alt]=""&gt;</code> to <code>{{avatar.content}}</code> but the template treated the html as plain text.</p>
  
  <p>What's my best option to get this done?</p>
  
  <p>component.ts</p>
  
  <pre><code>SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };
  
    avatars = [
      {
        content: 'https://semantic-ui.com/images/avatar2/large/kristy.png',
        visible: true
      },
      {
        content: 'https://semantic-ui.com/images/avatar2/large/matthew.png',
        visible: false
      },
      {
        content: 'http://semantic-ui.com/images/avatar/large/jenny.jpg',
        visible: false
      }
    ];
  
    // action triggered when user swipes
    swipe(currentIndex: number, action = this.SWIPE_ACTION.RIGHT) {
      // out of range
      if (currentIndex &gt; this.avatars.length || currentIndex &lt; 0) { return };
  
      let nextIndex = 0;
  
      // swipe right, next avatar
      if (action === this.SWIPE_ACTION.RIGHT) {
        const isLast = currentIndex === this.avatars.length - 1;
        nextIndex = isLast ? 0 : currentIndex + 1;
      }
  
      // swipe left, previous avatar
      if (action === this.SWIPE_ACTION.LEFT) {
        const isFirst = currentIndex === 0;
        nextIndex = isFirst ? this.avatars.length - 1 : currentIndex - 1;
      }
  
      // toggle avatar visibility
      this.avatars.forEach((x, i) =&gt; x.visible = (i === nextIndex));
    }
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;div class="swipe-box" *ngFor="let avatar of avatars; let idx=index" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)"
      [class.visible]="avatar.visible" [class.hidden]="!avatar.visible"&gt;
      &lt;div class="swipe-content"&gt;
          &lt;img [src]="avatar.content" [alt]=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the checkbox loop: </p>
  
  <pre><code>&lt;md-list&gt;
      &lt;md-list-item *ngFor="let guest of event['guests'] | keys"&gt;
          &lt;md-icon md-list-icon&gt;&lt;img class="event-img" src="http://lorempixel.com/70/70" /&gt;&lt;/md-icon&gt;
          &lt;h3 md-line&gt; {{ guest.value.first_name }} {{guest.value.last_name}} &lt;/h3&gt;
          &lt;p md-line&gt;
          &lt;/p&gt;
          &lt;span flex&gt;
              &lt;md-checkbox *ngIf="checkGuest(guest.key) === false" (change)="checkIn(guest.key)"&gt;&lt;/md-checkbox&gt;
              &lt;md-checkbox *ngIf="checkGuest(guest.key) === true" (change)="checkOut(guest.key)" [checked]="true === true"&gt;&lt;/md-checkbox&gt;
          &lt;/span&gt;
      &lt;/md-list-item&gt;
  &lt;/md-list&gt;
  </code></pre>