Q:

angular2-markdown with async operation fails

I am using angular2-markdown in Angular 4.x application.
I have the component:
<div class="content" mat-padding>
        <md-card class="mat-elevation-z2" mat-whiteframe="8">
            <div class="cover-wrapper">
                <img md-card-image src="{{ article?.cover }}">
            </div>
            <md-card-title fxFlex="100%">
                <span>{{ article.title }}</span>
            </md-card-title>
            <md-card-content>
                <markdown [data]="article.text"></markdown>
            </md-card-content>
        </md-card>
</div>

The component is setup as the following:
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute }   from '@angular/router';

import { Article } from '../../models/article';

import { ArticleStore } from '../../state/ArticleStore';
import { InterModuleService } from '../../service/inter-module.service';

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

  private article: Article;

  constructor( private route: ActivatedRoute, 
               private articleStore: ArticleStore,
               private interModuleService: InterModuleService ) { }

  ngOnInit(): void {
    this.interModuleService.article
        .subscribe((data) => {
            this.article = data;

            Promise.all(Object.keys(this.article['attachments']).map((at) => {
                return this.articleStore.getAttachment(this.article['id'],at).then ((res) => {
                    this.article.attachments[at]['data'] = res.toString();
                })
            })).then(()=> {
                this.interModuleService.sidenavToc.nativeElement['innerHTML'] = this.article.attachments['toc'].data;
            });

        });
    this.route.data
        .subscribe((data: { article: Article } ) => {
            this.interModuleService.article.next(data.article);
            this.interModuleService.article.complete();
        });
  }
}

According to the documentation for angular2-markdown, I have a few options to use to filter Markdown to HTML:
<div Markdown>
    ### your markdown code
</div>

<!-- or use angular component -->

<markdown>
    ### your markdown code
</markdown>

<!-- to load from remote URL -->

<div Markdown path="/path/to/readme.md"></div>

<!-- load remote source code with auto syntax highlighting -->

<markdown path="/path/to/code.cpp"></markdown>

<markdown path="/path/to/code.java"></markdown>

<!-- load remote source code from url stored in variable
(see additional details about variable binding in the next section) -->

<markdown [path]="urlVariable"></markdown>

However, none of the work. Usually, the article.text is always null/undefined. 

Though, if I was to do <div Markdown [innerHTML]='article.text'></div> I would get the text from the var but it would be a quoted string that angular2-markdown ignores. Screenshot below.

Full project -> https://github.com/flamusdiu/micro-blog

A:

After looking more at the source code, I realized I could call the service directly and just return the HTML directly.
Here's the updated component:
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute }   from '@angular/router';

import { MarkdownService } from 'angular2-markdown';

import { Article } from '../../models/article';

import { ArticleStore } from '../../state/ArticleStore';
import { InterModuleService } from '../../service/inter-module.service';

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

  private _cover: string;
  private _text: string;
  private _toc: string;
  private _title: string;

  constructor( private route: ActivatedRoute, 
               private articleStore: ArticleStore,
               private interModuleService: InterModuleService,
               private mdService: MarkdownService ) { }

  ngOnInit(): void {
    this.interModuleService.article
        .subscribe((data) => {
            let article: Article = data;
            this._cover = article.cover;
            this._title = article.title;

            Promise.all(Object.keys(article['attachments']).map((at) => {
                return this.articleStore.getAttachment(article['id'],at).then ((res) => {
                    article.attachments[at]['data'] = res.toString();
                })

            })).then(()=> {
                this._text = this.mdService.compile(article.text);
                this._toc = this.mdService.compile(article.toc)
                this.interModuleService.sidenavToc.nativeElement['innerHTML'] = this._toc;
            });

        });
    this.route.data
        .subscribe((data: { article: Article } ) => {
            this.interModuleService.article.next(data.article);
            this.interModuleService.article.complete();
        });
  }
}

