scroll to anchor | עם אנגולר. נחמד ושימושי

על מנת לייצר חוויה למשתמש אין צורך לעשות משהו מאוד גרנדיוזי . לרוב, המשתמש שלכם יחווה חוויה דווקא בשימושים קטנים למשל, אם אתם רוצים שהגולש ילחץ על כפתור כלשהו, או יעשה פעולה שתגובתה תגלול את המסך לנקודה אחרת בדף, אז אם "תקפיצו" את הדף לעוגן זה (anchor) אז היוזר יחוש מבולבל מעט . עדיף לייצר לו סקול נעים בתנועה ואין ספק שזה יסב לו סוג של אושר (לפחות שאני נתקל באיזה סקול נעים זה עושה לי טוב😊)

אנגולר חשבו על זה עוד לפנינו ופיתחו – viewportScroller

סופר פשוט וקל . שווה לנסות ולאמץ לכל פרויקט.

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

@Component({
    selector: 'app-component',
    templateUrl: './mycomponent.component.html'
})
export class MyComponent {
  constructor(private viewportScroller: ViewportScroller) {}

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

<a (click)="onClick('AnchorId')">לחצו עליי!</a>
 <a (click)="onClick('OtherAnchorId')">לחצו גם עליי!</a>
  
<div id="AnchorId"></div>
 <div id="OtherAnchorId"></div>

ועוד פרט חשוב בשביל שזה יעבוד, צריך להגדיר את anchorScrolling בקובץ routing.

@NgModule {
imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})]
}

זהו זה! . טריק נחמד מאוד ושימושי. בהצלחה!

פוסטים קשורים:

מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms מדריך אנגולר reactive form – יוצאים לדרך. צורות שונות לקריאה של קומפוננטות אנגולר (angular selector types) custom validator for groups – אנגולר ולידטור ייחודי לגרופ ב-reactive form