CODEWITHSUNDEEP
angularroutes
Mohammad
Mohammad

Reputation: 3547

angular: how to make link to jump for certain section in the same page

I want to an anchor link to jump to specific section in the same page using id hashtag. here is my html:

<div class="nav-container">
  <ul class="nav text-center">
    <li class="active">
      <a href="#account-services">Services</a>
    </li>
    <li>
      <a [routerLink]="['//account/'+account.account_id]" fragment="account-about">About</a>
    </li>
    <li>
      <a href="#account-gallery">Gallery</a>
    </li>
    <li>
      <a href="#account-reviews">Reviews</a>
    </li>
  </ul>
</div>
<div class="account-details">
  <div id="account-services">
    <h1>services</h1>
  </div>
  <div id="account-about">
    <h1>About Us</h1>
  </div>
  <div id="account-store">
    <h1>Store</h1>
  </div>
  <div id="account-gallery">
    <h1>Gallery</h1>
  </div>
  <div id="account-reviews">
    <h1>Reviews</h1>
  </div>
</div>

ts component:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-account-individual',
  templateUrl: './account-individual.component.html',
  styleUrls: ['./account-individual.component.css']
})
export class AccountIndividualComponent implements OnInit {

  private fragment: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) {
      console.log(e);
    }
  }
}

Upvotes: 8

Views: 23061

Answers (4)

B Kansara
B Kansara

Reputation: 1158

Install this package ng2-page-scroll

After that import in your app.module.ts

    import {Ng2PageScrollModule} from 'ng2-page-scroll';
    
    @NgModule({
        imports: [
            /* Other imports here */
            Ng2PageScrollModule
            ]
    })

   export class AppModule {
   }

and test in your component html

<a pageScroll href="#home">Testing</a>
<div id="home">

Upvotes: 3

Progga Ilma
Progga Ilma

Reputation: 635

This is for Angular 13 where ngx-page-scroll is not working currently.

import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller) {}

public onClick(elementId: string): void { 
  this.viewportScroller.scrollToAnchor(elementId);
}

Add upper part in component.ts file. For html file -

     <a (click)="onClick('about')" >About</a>
     <div id="about">....</div>

Upvotes: 6

Ali Jamal
Ali Jamal

Reputation: 619

Use fragment as you did and assign it to a click event:

in your template

<a fragment="account-about" (click)="navigateToSection('account-about')>About</a>

<div id="account-about">...</div>

in your component

public navigateToSection(section: string) {
      window.location.hash = '';
      window.location.hash = section;
}

Upvotes: 16

Shailesh Ladumor
Shailesh Ladumor

Reputation: 7242

try this 

this.route.fragment.subscribe(fragment => { 
                      setTimeout(() => {
                            this.scrollTo(fragment);
                        }, 300);
     });

Upvotes: 0

Related Questions