const element = document.querySelector("#" + tree.fragment);

import { Component, OnInit } from '@angular/core';
import { FaqItem } from './faq-item.model';
import { Router, NavigationEnd } from '@angular/router';

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

  faqItems: FaqItem[] = EXAMPLE_DATA;



  constructor(router: Router) {

    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          // const element = document.getElementById(tree.fragment);
          if (element) { element.scrollIntoView(true); }
        }
      }
    });

  }

  ngOnInit() {
  }

}

const EXAMPLE_DATA: FaqItem[] = [
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},

    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},  {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},
    {id: 1, question: 'How do i use the seedcalendar app?', answer: 'please check the getting started tutorial for this'},

]
export class FaqItem {
    id: number;
    question: string;
    answer: string;
}

<section id="top">
  <ol>
    <li *ngFor="let item of faqItems; let i=index">
        <a [routerLink]="['.']" fragment={{i}}>{{item.question}}</a>
    </li>
  </ol>
<dl>
  <app-faq-item *ngFor="let item of faqItems; let i=index"
  [question]="item.question" [answer]="item.answer" [attr.id]="i">
</app-faq-item>
</dl>
</section>