how to navigate to new screen on click of a button in ionic

Question

This my code for calling a page on click of a button

<a href="tranaddnew.html" class="btn btn-success">Add a new</a>

I am getting the following output.

Cannot GET /tranaddnew.html

Can anyone help me how to navigate to new screen on click of a button in ionic ?

Answer 1

You don't use anchor tags like a normal HTML in ionic.

you should be using 'navController' to navigate between views.

the Ionic documentation for NavController is the great place to read about this

Answer 2

You need to define the routes in your ngModules like this:

const routes: Routes = [
  {path: 'tranaddnew', component: tranaddnewPage},
];

@NgModule({
  declarations: [
   tranaddnewPage,
  ],
  imports: [
    RouterModule.forChild(routes),
  ]
})
export class HomeModule {
}

This will call a component that will be including a template in HTML (you don't call an html file).

Then you can use something like this in the template:

[routerLink]="['tranaddnew']"