CODEWITHSUNDEEP
angularionic-frameworkangular-ui-routerionic4
gaus shaikh
gaus shaikh

Reputation: 145

How to implement ion-chip clickable, when click page navigate to another page?

I am ionic 4 framework, in that i used ion-chip, i want to this ion-chip clickable. for example when i click on ion-chip navigate to another page.Here is the ion-chip documentation

Upvotes: 1

Views: 3109

Answers (3)

danactive
danactive

Reputation: 1048

I wanted my ionic desktop users to view the hyperlink in the status bar so these two work as well:

<ion-chip><a href="https://www.stackoverflow.com/">Test chip</a></ion-chip> or <a href="https://www.stackoverflow.com/"><ion-chip>Test chip</ion-chip></a>

Upvotes: 0

Vinod Gehlot
Vinod Gehlot

Reputation: 117

If you add tappable directive on then it also good working

<ion-chip (click)="openPage()" tappable>
   <ion-label>Home</ion-label>
</ion-chip>

Upvotes: 1

Khurshid Ansari
Khurshid Ansari

Reputation: 5095

You can add routerLink any element to navigate to another page. 

<ion-chip routerLink="/home">
  <ion-label>Home</ion-label>
</ion-chip>

<ion-chip>
  <ion-label routerLink="/details/42" color="secondary"> Details </ion-label>
</ion-chip>

Or you in component (html) :

<ion-chip (ionClick)="openPage()">
   <ion-label>Home</ion-label>
</ion-chip>

component : 

openPage(){
   this.router.navigateByUrl('/home');
}

Upvotes: 4

Related Questions