Redirect to another page using angular 6 - html

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);
}
}
}

Answer 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']);
}

Answer 2

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