Navigate to another page with a button in angular 2

Question

I am trying to navigate to a another page by clicking a button but it fails to work  What could be the problem  I am now learning angular 2 and it s a bit tough for me now      Routes Path in a folder call AdminBoard  export const AdminRoutes  Routes             path   dashboard        component  AdminComponent      children           path      redirectTo   Home           path   Home   component  HomeComponent          path   Service   component  ServiceComponent          path   Service Sign in   component CustomerComponent                     Button is also in a different folder  Click button to navigate to this page            path   Service Sign in   component CustomerComponent      lt button class  btn btn-success pull-right   gt  lt a routerLink   Service Sign in  gt  Add Customer lt  a gt  lt  button gt

User · Answer

Having the router link on the button seems to work fine for me    lt button class  nav-link  routerLink      click   hideMenu    gt        lt i class  fa fa-home  gt  lt  i gt         lt span gt Home lt  span gt   lt  button gt

User · Answer

lt button type  button  class  btn btn-primary-outline pull-right   click   btnClick     gt  lt i class  fa fa-plus  gt  lt  i gt  Add lt  button gt    import   Router   from   angular router    btnClick  function              this router navigate    user

User · Answer

You can use routerLink in the following manner    lt input type  button  value  Add Bulk Enquiry   routerLink        addBulkEnquiry    class  btn  gt    or use  lt button  routerLink       url    gt  in your case  for more info you could read the entire stacktrace on github https   github com angular angular issues 9471  the other methods are also correct but they create a dependency on the component file   Hope your concern is resolved

User · Answer

you can change        this router routeReuseStrategy shouldReuseRoute        gt  false        at the component level in constructor like bellow       constructor private router  Router                this router routeReuseStrategy shouldReuseRoute        gt  false

User · Answer

Use it like this  should work    lt a routerLink  quot  Service Sign in quot  gt  lt button class  quot btn btn-success pull-right quot   gt  Add Customer lt  button gt  lt  a gt   You can also use router navigateByUrl       like this   lt button type  quot button quot  class  quot btn btn-primary-outline pull-right quot   click   quot btnClick    quot  gt  lt i class  quot fa fa-plus quot  gt  lt  i gt  Add lt  button gt       import   Router   from   angular router    btnClick  function              this router navigateByUrl   user        Update 1 You have to inject Router in the constructor like this  constructor private router  Router       only then you are able to use this router  Remember also to import RouterModule in your module  Update 2 Now  After Angular v4 you can directly add routerLink attribute on the button  As mentioned by  mark in comment section  like below  No  quot   url  quot  since Angular 6  when a Route in RouterModule exists  -   lt button  routerLink   quot  url  quot  gt  Button Label lt  button gt

User · Answer

It is important that you decorate the router link and link with square brackets as follows     lt a  routerLink      service    gt   lt button class  btn btn-info  gt  link to other page  lt  button gt  lt  a gt    Where   service  in this case is the path url specified in the routing component

[angular] Navigate to another page with a button in angular 2

Examples related to angular