Angular 4 Dynamic HTML with Anchor Scroll

Question

I made an Angular App which loads a markdown file dynamically.

Maybe in the markdown file there are anchor links. How can i add anchor scroll support to angular?

<div class="content-card" [innerHTML]="content | markdown | pageScroll"></div>

and:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-getting-started',
  templateUrl: './getting-started.component.html',
  styleUrls: ['./getting-started.component.scss']
})
export class GettingStartedComponent {

  content: string;

  constructor(private http: HttpClient) {
    http.get('/assets/getting-started.md', {responseType: 'text'}).subscribe(data => {
      this.content = data;
    });
  }
}

---

SOLVED:

with ng-dynamic:

<div class="content-card">
  <div *dynamicComponent="content | markdown | pageScroll; context: { anchorClick: anchorClick };"></div>
</div>

in my component:

anchorClick(event) {
    const anchor = event.srcElement.getAttribute('anchor');
    document.getElementById(anchor).scrollIntoView();
  }

my pipes only evaluates the loaded file. if you have the same error you can ignore this.

but page scroll pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'pageScroll'
})
export class PageScrollPipe implements PipeTransform {

  transform(value: string): string {
    value = value || '';
    return value.split('href="#').join('(click)="anchorClick($event)" anchor="');
  }
}