Go to particular Route's div elementHow can I select an element in a component template?In Angular, how do you determine the active route?Reset service variable on route change in Angular2Angular 2 Protractor: Click div elementElement doesn't get destroyed on router navigation after manipulating DOMHow to pass different template variables to one button in angular2?element not visible but present - protractorangular route animation change dynamicallyOpen clicked li's child divAngular: Hiding/showing elements by ngIf or Toggling a class?
How does Loki do this?
Two monoidal structures and copowering
Roman Numeral Treatment of Suspensions
Is expanding the research of a group into machine learning as a PhD student risky?
Implement the Thanos sorting algorithm
Crossing the line between justified force and brutality
Why didn't Theresa May consult with Parliament before negotiating a deal with the EU?
How does the UK government determine the size of a mandate?
Customer Requests (Sometimes) Drive Me Bonkers!
I'm in charge of equipment buying but no one's ever happy with what I choose. How to fix this?
Trouble understanding the speech of overseas colleagues
Is this apparent Class Action settlement a spam message?
when is out of tune ok?
How do I find the solutions of the following equation?
How can a function with a hole (removable discontinuity) equal a function with no hole?
Unreliable Magic - Is it worth it?
How to run a prison with the smallest amount of guards?
Short story about space worker geeks who zone out by 'listening' to radiation from stars
How to Reset Passwords on Multiple Websites Easily?
How do I extract a value from a time formatted value in excel?
What is the difference between "behavior" and "behaviour"?
Is there a korbon needed for conversion?
Anatomically Correct Strange Women In Ponds Distributing Swords
System.debug(JSON.Serialize(o)) Not longer shows full string
Go to particular Route's div element
How can I select an element in a component template?In Angular, how do you determine the active route?Reset service variable on route change in Angular2Angular 2 Protractor: Click div elementElement doesn't get destroyed on router navigation after manipulating DOMHow to pass different template variables to one button in angular2?element not visible but present - protractorangular route animation change dynamicallyOpen clicked li's child divAngular: Hiding/showing elements by ngIf or Toggling a class?
I have two routes. From one route I need to get another route's div element by button click. I done a similar way with id(#) that we do in HTML but It's not working out. Can you suggest a best way to do in Angular>
Route One (/route1)
<div class="div1">
<p>hi</p>
</div>
<div class="div2">
<p>hello</p>
</div>
Route two (/route2)
<button (click)="getDiv()"></button>
TS
getDiv()
this.router.navigate(['/route1']); // I need to get div1 of route1 here
angular typescript asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
|
show 5 more comments
I have two routes. From one route I need to get another route's div element by button click. I done a similar way with id(#) that we do in HTML but It's not working out. Can you suggest a best way to do in Angular>
Route One (/route1)
<div class="div1">
<p>hi</p>
</div>
<div class="div2">
<p>hello</p>
</div>
Route two (/route2)
<button (click)="getDiv()"></button>
TS
getDiv()
this.router.navigate(['/route1']); // I need to get div1 of route1 here
asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
So you basically want to do an anchor link using routing? If yes, that's not how route works.
– Jacopo Sciampi
Mar 8 at 11:27
Bythis.router.navigate(['/route1']);, we can go to particular route know. So, Is there is any way to get the div of that route is what I am asking
– Felix Christo
Mar 8 at 11:30
You could send the id of the div asparamand handle the scrolling on your target component
– FabioG
Mar 8 at 11:30
gotodiv(id) const element = document.getElemnetById(id); if (element) element.scrollIntoView( behavior: 'smooth', block: 'start' );
– Joel Joseph
Mar 8 at 11:35
This is typescript
– Felix Christo
Mar 8 at 11:36
|
show 5 more comments
I have two routes. From one route I need to get another route's div element by button click. I done a similar way with id(#) that we do in HTML but It's not working out. Can you suggest a best way to do in Angular>
Route One (/route1)
<div class="div1">
<p>hi</p>
</div>
<div class="div2">
<p>hello</p>
</div>
Route two (/route2)
<button (click)="getDiv()"></button>
TS
getDiv()
this.router.navigate(['/route1']); // I need to get div1 of route1 here
asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
I have two routes. From one route I need to get another route's div element by button click. I done a similar way with id(#) that we do in HTML but It's not working out. Can you suggest a best way to do in Angular>
Route One (/route1)
<div class="div1">
<p>hi</p>
</div>
<div class="div2">
<p>hello</p>
</div>
Route two (/route2)
<button (click)="getDiv()"></button>
TS
getDiv()
this.router.navigate(['/route1']); // I need to get div1 of route1 here
asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
asked Mar 8 at 11:26
Felix ChristoFelix Christo
487
487
So you basically want to do an anchor link using routing? If yes, that's not how route works.
– Jacopo Sciampi
Mar 8 at 11:27
Bythis.router.navigate(['/route1']);, we can go to particular route know. So, Is there is any way to get the div of that route is what I am asking
– Felix Christo
Mar 8 at 11:30
You could send the id of the div asparamand handle the scrolling on your target component
– FabioG
Mar 8 at 11:30
gotodiv(id) const element = document.getElemnetById(id); if (element) element.scrollIntoView( behavior: 'smooth', block: 'start' );
– Joel Joseph
Mar 8 at 11:35
This is typescript
– Felix Christo
Mar 8 at 11:36
|
show 5 more comments
So you basically want to do an anchor link using routing? If yes, that's not how route works.
– Jacopo Sciampi
Mar 8 at 11:27
Bythis.router.navigate(['/route1']);, we can go to particular route know. So, Is there is any way to get the div of that route is what I am asking
– Felix Christo
Mar 8 at 11:30
You could send the id of the div asparamand handle the scrolling on your target component
– FabioG
Mar 8 at 11:30
gotodiv(id) const element = document.getElemnetById(id); if (element) element.scrollIntoView( behavior: 'smooth', block: 'start' );
– Joel Joseph
Mar 8 at 11:35
This is typescript
– Felix Christo
Mar 8 at 11:36
So you basically want to do an anchor link using routing? If yes, that's not how route works.
– Jacopo Sciampi
Mar 8 at 11:27
So you basically want to do an anchor link using routing? If yes, that's not how route works.
– Jacopo Sciampi
Mar 8 at 11:27
By
this.router.navigate(['/route1']); , we can go to particular route know. So, Is there is any way to get the div of that route is what I am asking– Felix Christo
Mar 8 at 11:30
By
this.router.navigate(['/route1']); , we can go to particular route know. So, Is there is any way to get the div of that route is what I am asking– Felix Christo
Mar 8 at 11:30
You could send the id of the div as
param and handle the scrolling on your target component– FabioG
Mar 8 at 11:30
You could send the id of the div as
param and handle the scrolling on your target component– FabioG
Mar 8 at 11:30
gotodiv(id) const element = document.getElemnetById(id); if (element) element.scrollIntoView( behavior: 'smooth', block: 'start' ); – Joel Joseph
Mar 8 at 11:35
gotodiv(id) const element = document.getElemnetById(id); if (element) element.scrollIntoView( behavior: 'smooth', block: 'start' ); – Joel Joseph
Mar 8 at 11:35
This is typescript
– Felix Christo
Mar 8 at 11:36
This is typescript
– Felix Christo
Mar 8 at 11:36
|
show 5 more comments
2 Answers
2
active
oldest
votes
If you are using angular 6.1+ version you can enable anchorScrolling manually
app.module.ts
@NgModule(
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(route,
anchorScrolling: 'enabled'
) ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
)
Then specifies the id on the div which you want to scroll to
router-a.component.ts
<div class="div1" id="div1">
<p>Div1</p>
</div>
<div class="div2" id="div2" >
<p>Div2</p>
</div>
Finall Use fragment to navigate to the current div location
getDiv()
this.router.navigate(['/route2'], fragment: 'div2' );
Example:https://stackblitz.com/edit/angular-h7bvyu
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
add a comment |
your html should be in a different module and routing should be configured. Using the following code in the html would don the same routing.
<button [routerLink]="['/route1']">View All</button>
your router should be configured with the root.
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
I want to go to/route1's particular div not/route1
– Felix Christo
Mar 8 at 12:01
you have to add that div into another module and do the routing separately. You can't route to specific div in the same html via route. Just use ngif to show hide that div for the click action.
– Osanda Wedamulla
Mar 8 at 12:08
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
);
);
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%2f55062285%2fgo-to-particular-routes-div-element%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
If you are using angular 6.1+ version you can enable anchorScrolling manually
app.module.ts
@NgModule(
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(route,
anchorScrolling: 'enabled'
) ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
)
Then specifies the id on the div which you want to scroll to
router-a.component.ts
<div class="div1" id="div1">
<p>Div1</p>
</div>
<div class="div2" id="div2" >
<p>Div2</p>
</div>
Finall Use fragment to navigate to the current div location
getDiv()
this.router.navigate(['/route2'], fragment: 'div2' );
Example:https://stackblitz.com/edit/angular-h7bvyu
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
add a comment |
If you are using angular 6.1+ version you can enable anchorScrolling manually
app.module.ts
@NgModule(
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(route,
anchorScrolling: 'enabled'
) ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
)
Then specifies the id on the div which you want to scroll to
router-a.component.ts
<div class="div1" id="div1">
<p>Div1</p>
</div>
<div class="div2" id="div2" >
<p>Div2</p>
</div>
Finall Use fragment to navigate to the current div location
getDiv()
this.router.navigate(['/route2'], fragment: 'div2' );
Example:https://stackblitz.com/edit/angular-h7bvyu
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
add a comment |
If you are using angular 6.1+ version you can enable anchorScrolling manually
app.module.ts
@NgModule(
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(route,
anchorScrolling: 'enabled'
) ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
)
Then specifies the id on the div which you want to scroll to
router-a.component.ts
<div class="div1" id="div1">
<p>Div1</p>
</div>
<div class="div2" id="div2" >
<p>Div2</p>
</div>
Finall Use fragment to navigate to the current div location
getDiv()
this.router.navigate(['/route2'], fragment: 'div2' );
Example:https://stackblitz.com/edit/angular-h7bvyu
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
If you are using angular 6.1+ version you can enable anchorScrolling manually
app.module.ts
@NgModule(
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(route,
anchorScrolling: 'enabled'
) ],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
)
Then specifies the id on the div which you want to scroll to
router-a.component.ts
<div class="div1" id="div1">
<p>Div1</p>
</div>
<div class="div2" id="div2" >
<p>Div2</p>
</div>
Finall Use fragment to navigate to the current div location
getDiv()
this.router.navigate(['/route2'], fragment: 'div2' );
Example:https://stackblitz.com/edit/angular-h7bvyu
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
answered Mar 8 at 12:14
ChellappanChellappan
5,7812421
5,7812421
add a comment |
add a comment |
your html should be in a different module and routing should be configured. Using the following code in the html would don the same routing.
<button [routerLink]="['/route1']">View All</button>
your router should be configured with the root.
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
I want to go to/route1's particular div not/route1
– Felix Christo
Mar 8 at 12:01
you have to add that div into another module and do the routing separately. You can't route to specific div in the same html via route. Just use ngif to show hide that div for the click action.
– Osanda Wedamulla
Mar 8 at 12:08
add a comment |
your html should be in a different module and routing should be configured. Using the following code in the html would don the same routing.
<button [routerLink]="['/route1']">View All</button>
your router should be configured with the root.
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
I want to go to/route1's particular div not/route1
– Felix Christo
Mar 8 at 12:01
you have to add that div into another module and do the routing separately. You can't route to specific div in the same html via route. Just use ngif to show hide that div for the click action.
– Osanda Wedamulla
Mar 8 at 12:08
add a comment |
your html should be in a different module and routing should be configured. Using the following code in the html would don the same routing.
<button [routerLink]="['/route1']">View All</button>
your router should be configured with the root.
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
your html should be in a different module and routing should be configured. Using the following code in the html would don the same routing.
<button [routerLink]="['/route1']">View All</button>
your router should be configured with the root.
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
answered Mar 8 at 11:57
Osanda WedamullaOsanda Wedamulla
1256
1256
I want to go to/route1's particular div not/route1
– Felix Christo
Mar 8 at 12:01
you have to add that div into another module and do the routing separately. You can't route to specific div in the same html via route. Just use ngif to show hide that div for the click action.
– Osanda Wedamulla
Mar 8 at 12:08
add a comment |
I want to go to/route1's particular div not/route1
– Felix Christo
Mar 8 at 12:01
you have to add that div into another module and do the routing separately. You can't route to specific div in the same html via route. Just use ngif to show hide that div for the click action.
– Osanda Wedamulla
Mar 8 at 12:08
I want to go to
/route1 's particular div not /route1– Felix Christo
Mar 8 at 12:01
I want to go to
/route1 's particular div not /route1– Felix Christo
Mar 8 at 12:01
you have to add that div into another module and do the routing separately. You can't route to specific div in the same html via route. Just use ngif to show hide that div for the click action.
– Osanda Wedamulla
Mar 8 at 12:08
you have to add that div into another module and do the routing separately. You can't route to specific div in the same html via route. Just use ngif to show hide that div for the click action.
– Osanda Wedamulla
Mar 8 at 12:08
add a comment |
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.
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%2f55062285%2fgo-to-particular-routes-div-element%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
So you basically want to do an anchor link using routing? If yes, that's not how route works.
– Jacopo Sciampi
Mar 8 at 11:27
By
this.router.navigate(['/route1']);, we can go to particular route know. So, Is there is any way to get the div of that route is what I am asking– Felix Christo
Mar 8 at 11:30
You could send the id of the div as
paramand handle the scrolling on your target component– FabioG
Mar 8 at 11:30
gotodiv(id) const element = document.getElemnetById(id); if (element) element.scrollIntoView( behavior: 'smooth', block: 'start' );– Joel Joseph
Mar 8 at 11:35
This is typescript
– Felix Christo
Mar 8 at 11:36