Angular 2 directive scrolls into view

scroll_bulletin_int_view.component.ts

import { AfterViewInit, Directive, ElementRef, Input, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Directive({
  selector: '[flScrollBulletinIntoView]'
})
export class ScrollBulletinIntoViewDirective implements AfterViewInit, OnDestroy {
  @Input() bulletinId: number;
  private scrollIntoView$: Subscription;

  constructor(private el: ElementRef,
              private route: ActivatedRoute,
              private router: Router) { }

  ngAfterViewInit() {
    this.scrollIntoView$ = this.route.params.map(params => params.bulletin)
      .distinctUntilChanged()
      .map(bulId => +bulId)
      .filter(bulId => this.bulletinId === bulId)
      .do(() => {
        this.router.navigate([{}], {relativeTo: this.route});
        this.el.nativeElement.scrollIntoView();
      })
      .subscribe()
  }

  ngOnDestroy(): void {
    this.scrollIntoView$.unsubscribe();
  }
}

Usage Example:
              <div flScrollBulletinIntoView
                   [bulletinId]="bulletinsChapter?.bulletin?.id"
                   [ngSwitch]="bulletinsChapter?.bulletin?.kind" class="print-break">