title: Redirect to another page using angular 6
body: <p>I am using a template I bought recently to build my ionic + angular app. My problem is that I am new to angular and I am trying to redirect the user when the click a button. I've been researching and I got the point where it detects the click but doesn't redirect. I tried importing "router" and other troubleshooting steps but it's not working for me. Here is my html, and ts file.</p>
  
  <p>html</p>
  
  <pre><code>&lt;!--Theme Google Card - Full Image Cards--&gt;
  &lt;ion-content padding-top&gt;
    &lt;ion-grid no-padding&gt;
   &lt;ion-row *ngIf="data != null"&gt;
   &lt;ion-col col-12 col-md-6 col-lg-6  *ngFor="let item of data.items;let i = index"&gt;
   &lt;ion-card text-left box-shadow margin-bottom&gt;
            &lt;!--Card Image--&gt;
    &lt;div card-image&gt;
    &lt;img [src]="item.image" /&gt;
    &lt;div watch-now text-center (click)="onEvent('onItemClick', item, $event)"&gt;
    &lt;button ion-button button-icon icon-start&gt;
    &lt;ion-icon icon-small [name]="item.icon"&gt;&lt;/ion-icon&gt;
     {{item.iconText}}
    &lt;/button &gt;
     &lt;/div&gt;
     &lt;/div&gt;
            &lt;!--Card descriptiom--&gt;
    &lt;ion-card-content&gt;
    &lt;ion-card-title text-center&gt;
                  &lt;!--Card Subtitle--&gt;
   &lt;h1 card-title&gt;{{item.title}}&lt;/h1&gt;
                  &lt;!-- Icon Rating Star --&gt;
    &lt;ion-icon *ngFor="let star of item.ratingStar.iconsStars; let i = index" (click)="onStarClass(item.ratingStar.iconsStars, i, $event)"&gt;
    &lt;i icon-small *ngIf="star.isActive" class="icon {{star.iconActive}}"&gt;&lt;/i&gt;
   &lt;i icon-small *ngIf="!star.isActive" class="icon {{star.iconInactive}}"&gt;&lt;/i&gt;
    &lt;/ion-icon&gt;
                  &lt;!-- Reviews Star --&gt;
   &lt;span span-medium&gt;{{item.reviews}}&lt;/span&gt;
                  &lt;!--Card Body Text--&gt;
    &lt;p margin-top card-body-text&gt;{{item.description}}&lt;/p&gt;
    &lt;/ion-card-title&gt;
    &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
    &lt;/ion-col&gt;
    &lt;/ion-row&gt;
    &lt;/ion-grid&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>import { Component, Input, ViewChild } from '@angular/core';
  import { IonicPage, Content } from 'ionic-angular';
  
  @IonicPage()
  @Component({
      selector: 'google-card-layout-1',
      templateUrl: 'google-card.html'
  })
  export class GoogleCardLayout1 {
      @Input() data: any;
      @Input() events: any;
      @ViewChild(Content)
      content: Content;
      slider = {};
  
      constructor() { }
  
      slideHasChanged(slider, index): void {
          this.slider[index] = slider;
          if (2 == slider._activeIndex) {
              if (this.data.items) {
                  this.data.items.splice(index, 1);
              } else {
                  this.data.splice(index, 1);
              }
          }
      }
  
      onStarClass(items: any, index: number, e: any) {
        if (e) {
          e.stopPropagation();
        }
        for (var i = 0; i &lt; items.length; i++) {
          items[i].isActive = i &lt;= index;
        }
        this.onEvent("onRates", index, e);
      };
  
      onClickEvent(index): void {
          if (this.slider[index]) {
              this.slider[index].slidePrev(300);
          }
      }
  
      onEvent(event: string, item: any, e: any) {
          if (e) {
              e.stopPropagation();
          }
          if (this.events[event]) {
              this.events[event](item);
          }
      }
  }
  </code></pre>