9. Navigation Link

Attribute: navlink

If you apply the ripple directive to a HTML <a> tag which is commonly used as a navigation link, you have to use navlink instead of href. It is in order to prevent default behavior of the <a> tag and emmit the event only after the ripple-core fadeout completely. Then, call a method to process the event and navigate to the specified link page.

   <a navlink="/home" ripple
      ...
      (rclick)="goBack($event)"
      (rtap)="goBack($event)">
      Back
   </a>

or

   <my-component navlink="/home" ripple
      ...
      (rclick)="goBack($event)"
      (rtap)="goBack($event)">
      Back
   </my-component>

   ...
   import  { Router } from '@angular/router';
   ...
   export default SecondPage {
      ...
      constructor(private router: Router) { 
         ... 
      }
      ...
      goBack(event: any) {
         this.router.navigateByUrl(event.navLink);
      }
      ...
   }