Routing on button click in angular 5
1
I need to route to home component when user click button. I how to do it using <a href=””> using routerLink. But is their any way to do it on button click?
<a class="nav-item nav-link-edit" [routerLink]="['']">home</a>
Above is how I use <a href=""> tag to route.
angular routing angular5
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
add a comment |
1
I need to route to home component when user click button. I how to do it using <a href=””> using routerLink. But is their any way to do it on button click?
<a class="nav-item nav-link-edit" [routerLink]="['']">home</a>
Above is how I use <a href=""> tag to route.
angular routing angular5
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
add a comment |
1
1
1
I need to route to home component when user click button. I how to do it using <a href=””> using routerLink. But is their any way to do it on button click?
<a class="nav-item nav-link-edit" [routerLink]="['']">home</a>
Above is how I use <a href=""> tag to route.
angular routing angular5
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
I need to route to home component when user click button. I how to do it using <a href=””> using routerLink. But is their any way to do it on button click?
<a class="nav-item nav-link-edit" [routerLink]="['']">home</a>
Above is how I use <a href=""> tag to route.
angular routing angular5
angular routing angular5
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
asked Apr 3 at 12:10
dilusha_dasanayaka
567418
567418
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
6
Yes, routerLink works on both anchor tags and button tags. You can do this:
<button class="nav-item nav-link-edit" [routerLink]="['']">home</button >
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
thanks. it working. is there any way to do something before route to the next page?
– dilusha_dasanayaka
Apr 3 at 12:22
2
If you are talking about doing something in the current component before leaving you will need to ditchrouterLinkand just navigate in your component. You can bind to theclickmethod on the button and have it call the method in your component that runs your logic and then routes. If you are talking about running some code before a route resolves you will need to look into a Resolver
– Teddy Sterne
Apr 3 at 12:45
add a comment |
-1
routerLink will be working properly.
app.component.html:
<button class="nav-item nav-link-edit" [routerLink]="['Home']">Home</button >
edited Nov 11 at 8:43
lucascaro
3,42611530
answered Nov 11 at 8:22
soumya cb
1
Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.
– lucascaro
Nov 11 at 8:44
I can't see any different between your answer and Teddy's one. but I appreciate your help try to give alternative solution if you try to answer an answered question. Don't be discourage.
– dilusha_dasanayaka
Nov 11 at 12:51
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49629797%2frouting-on-button-click-in-angular-5%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
6
Yes, routerLink works on both anchor tags and button tags. You can do this:
<button class="nav-item nav-link-edit" [routerLink]="['']">home</button >
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
thanks. it working. is there any way to do something before route to the next page?
– dilusha_dasanayaka
Apr 3 at 12:22
2
If you are talking about doing something in the current component before leaving you will need to ditchrouterLinkand just navigate in your component. You can bind to theclickmethod on the button and have it call the method in your component that runs your logic and then routes. If you are talking about running some code before a route resolves you will need to look into a Resolver
– Teddy Sterne
Apr 3 at 12:45
add a comment |
6
Yes, routerLink works on both anchor tags and button tags. You can do this:
<button class="nav-item nav-link-edit" [routerLink]="['']">home</button >
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
thanks. it working. is there any way to do something before route to the next page?
– dilusha_dasanayaka
Apr 3 at 12:22
2
If you are talking about doing something in the current component before leaving you will need to ditchrouterLinkand just navigate in your component. You can bind to theclickmethod on the button and have it call the method in your component that runs your logic and then routes. If you are talking about running some code before a route resolves you will need to look into a Resolver
– Teddy Sterne
Apr 3 at 12:45
add a comment |
6
6
6
Yes, routerLink works on both anchor tags and button tags. You can do this:
<button class="nav-item nav-link-edit" [routerLink]="['']">home</button >
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
Yes, routerLink works on both anchor tags and button tags. You can do this:
<button class="nav-item nav-link-edit" [routerLink]="['']">home</button >
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
answered Apr 3 at 12:14
Teddy Sterne
6,74311529
6,74311529
thanks. it working. is there any way to do something before route to the next page?
– dilusha_dasanayaka
Apr 3 at 12:22
2
If you are talking about doing something in the current component before leaving you will need to ditchrouterLinkand just navigate in your component. You can bind to theclickmethod on the button and have it call the method in your component that runs your logic and then routes. If you are talking about running some code before a route resolves you will need to look into a Resolver
– Teddy Sterne
Apr 3 at 12:45
add a comment |
thanks. it working. is there any way to do something before route to the next page?
– dilusha_dasanayaka
Apr 3 at 12:22
2
If you are talking about doing something in the current component before leaving you will need to ditchrouterLinkand just navigate in your component. You can bind to theclickmethod on the button and have it call the method in your component that runs your logic and then routes. If you are talking about running some code before a route resolves you will need to look into a Resolver
– Teddy Sterne
Apr 3 at 12:45
thanks. it working. is there any way to do something before route to the next page?
– dilusha_dasanayaka
Apr 3 at 12:22
thanks. it working. is there any way to do something before route to the next page?
– dilusha_dasanayaka
Apr 3 at 12:22
2
2
If you are talking about doing something in the current component before leaving you will need to ditch
routerLink and just navigate in your component. You can bind to the click method on the button and have it call the method in your component that runs your logic and then routes. If you are talking about running some code before a route resolves you will need to look into a Resolver– Teddy Sterne
Apr 3 at 12:45
If you are talking about doing something in the current component before leaving you will need to ditch
routerLink and just navigate in your component. You can bind to the click method on the button and have it call the method in your component that runs your logic and then routes. If you are talking about running some code before a route resolves you will need to look into a Resolver– Teddy Sterne
Apr 3 at 12:45
add a comment |
-1
routerLink will be working properly.
app.component.html:
<button class="nav-item nav-link-edit" [routerLink]="['Home']">Home</button >
edited Nov 11 at 8:43
lucascaro
3,42611530
answered Nov 11 at 8:22
soumya cb
1
Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.
– lucascaro
Nov 11 at 8:44
I can't see any different between your answer and Teddy's one. but I appreciate your help try to give alternative solution if you try to answer an answered question. Don't be discourage.
– dilusha_dasanayaka
Nov 11 at 12:51
add a comment |
-1
routerLink will be working properly.
app.component.html:
<button class="nav-item nav-link-edit" [routerLink]="['Home']">Home</button >
edited Nov 11 at 8:43
lucascaro
3,42611530
answered Nov 11 at 8:22
soumya cb
1
Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.
– lucascaro
Nov 11 at 8:44
I can't see any different between your answer and Teddy's one. but I appreciate your help try to give alternative solution if you try to answer an answered question. Don't be discourage.
– dilusha_dasanayaka
Nov 11 at 12:51
add a comment |
-1
-1
-1
routerLink will be working properly.
app.component.html:
<button class="nav-item nav-link-edit" [routerLink]="['Home']">Home</button >
edited Nov 11 at 8:43
lucascaro
3,42611530
answered Nov 11 at 8:22
soumya cb
1
routerLink will be working properly.
app.component.html:
<button class="nav-item nav-link-edit" [routerLink]="['Home']">Home</button >
edited Nov 11 at 8:43
lucascaro
3,42611530
answered Nov 11 at 8:22
soumya cb
1
edited Nov 11 at 8:43
lucascaro
3,42611530
edited Nov 11 at 8:43
lucascaro
3,42611530
edited Nov 11 at 8:43
lucascaro
3,42611530
3,42611530
answered Nov 11 at 8:22
soumya cb
1
answered Nov 11 at 8:22
soumya cb
1
answered Nov 11 at 8:22
soumya cb
1
1
Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.
– lucascaro
Nov 11 at 8:44
I can't see any different between your answer and Teddy's one. but I appreciate your help try to give alternative solution if you try to answer an answered question. Don't be discourage.
– dilusha_dasanayaka
Nov 11 at 12:51
add a comment |
Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.
– lucascaro
Nov 11 at 8:44
I can't see any different between your answer and Teddy's one. but I appreciate your help try to give alternative solution if you try to answer an answered question. Don't be discourage.
– dilusha_dasanayaka
Nov 11 at 12:51
Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.
– lucascaro
Nov 11 at 8:44
Welcome to Stack Overflow! Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.
– lucascaro
Nov 11 at 8:44
I can't see any different between your answer and Teddy's one. but I appreciate your help try to give alternative solution if you try to answer an answered question. Don't be discourage.
– dilusha_dasanayaka
Nov 11 at 12:51
I can't see any different between your answer and Teddy's one. but I appreciate your help try to give alternative solution if you try to answer an answered question. Don't be discourage.
– dilusha_dasanayaka
Nov 11 at 12:51
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49629797%2frouting-on-button-click-in-angular-5%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
