Redirect to another page using angular 6

Question

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.

html

<!--Theme Google Card - Full Image Cards-->
<ion-content padding-top>
  <ion-grid no-padding>
 <ion-row *ngIf="data != null">
 <ion-col col-12 col-md-6 col-lg-6  *ngFor="let item of data.items;let i = index">
 <ion-card text-left box-shadow margin-bottom>
          <!--Card Image-->
  <div card-image>
  <img [src]="item.image" />
  <div watch-now text-center (click)="onEvent('onItemClick', item, $event)">
  <button ion-button button-icon icon-start>
  <ion-icon icon-small [name]="item.icon"></ion-icon>
   {{item.iconText}}
  </button >
   </div>
   </div>
          <!--Card descriptiom-->
  <ion-card-content>
  <ion-card-title text-center>
                <!--Card Subtitle-->
 <h1 card-title>{{item.title}}</h1>
                <!-- Icon Rating Star -->
  <ion-icon *ngFor="let star of item.ratingStar.iconsStars; let i = index" (click)="onStarClass(item.ratingStar.iconsStars, i, $event)">
  <i icon-small *ngIf="star.isActive" class="icon {{star.iconActive}}"></i>
 <i icon-small *ngIf="!star.isActive" class="icon {{star.iconInactive}}"></i>
  </ion-icon>
                <!-- Reviews Star -->
 <span span-medium>{{item.reviews}}</span>
                <!--Card Body Text-->
  <p margin-top card-body-text>{{item.description}}</p>
  </ion-card-title>
  </ion-card-content>
  </ion-card>
  </ion-col>
  </ion-row>
  </ion-grid>
</ion-content>

TS

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 < items.length; i++) {
        items[i].isActive = i <= 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);
        }
    }
}

Solution 1

Firstly you have to declare your route in your routing file in my case i have one newly created component so i update my route as follow

 {
        path: 'admin',
        canActivate: [AuthGuard],
        loadChildren: './pages/admin/admin.module#AdminModule'
 },

After that there are two method to navigate,
1) <button [routerLink]="['/admin']" ion-button button-icon icon-start>
2) <button (click)="navigate()" ion-button button-icon icon-start>

     and in your ts file add code

 navigate() {
      this.router.navgateURL(['/admin']);
   }

Solution 2

Try:

<button [routerLink]="['/path']" ion-button button-icon icon-start>

Comments

[Pietro Nadalini]

Please only add the code where you are having problems How to create a Minimal, Complete, and Verifiable example

[Waskey88]

Thanks for the tip @pnadalini but I am new to angular so I am not sure if you need both the ts and html file

[Pietro Nadalini]

Yes, its better if you include both, but only the html part of the button and the .ts of what the button is trying to do. Also, you might want to complete the Tour of Heroes Tutorial where they teach how to do routing.