Anzeigen von HTML-Code in Angular

<div  [innerHTML]="[[article.html]]"></div>

<div *ngIf="article">

    <p>read article: {{guidarticle}}</p>

    <div>

        <h1>Title: {{article.title}}</h1>

        <div  [innerHTML]="[[article.html]]"></div>

        <div><a href="/edit/{{guidarticle}}" title="edit" class="link_item">edit</a>

        </div>

    </div>

</div>

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

import { ActivatedRoute } from '@angular/router';

import { merge, of as observableOf } from 'rxjs';

import { catchError, startWith, switchMap } from 'rxjs/operators';

import { Title } from '@angular/platform-browser';

import { ArticleReadModel } from '../../../models/articlereadmodel'

import { ArticlesService } from '../../../services/articles.service'

@Component({

  selector: 'app-read-article',

  templateUrl: './read-article.component.html',

  styleUrls: ['./read-article.component.css']

})

export class ReadArticleComponent implements OnInit {

  //--------< Export_Component >-------

  constructor(

    public dataService: ArticlesService,

    private route: ActivatedRoute,  //*get ID

    private titleService: Title,     //*set page title

  ) { }

  //< variables >

  public resultsLength = 0;

  public isLoadingResults = false;

  public isHttpError = false;

  public sError_Message = "Web Data error  or http request error";

  //</ variables >

  //--< mapping >--

  guidarticle!: number;

  guiduser!: String;

  article!: ArticleReadModel;

  dateedit!: Date;

  //--</ mapping >--

  ngOnInit() {

    //--------< ngOnInit() >--------

    this.route.params.subscribe(params => {

      //< get ID >

      //*get ID from URL like timerecords/1

      this.guidarticle = +params['id'];  // (+) converts string 'id' to a number

      console.log(this.guidarticle);

      //</ get ID >

      if (this.guidarticle > 0) {

        //< get Dataset >

        this.load_DataSource();

        //</ get Dataset >

      }

      else {

        //< new >

        //*empty fields

        //</ new >

      }

    });

    //--------</ ngOnInit() >--------

  }

  edit_article(id: number){

  }

  //#region

  //====< functions >====

  load_DataSource() {

    //--------< load_DataSource() >--------

    //< check >

    if (this.guidarticle == 0) return;

    //</ check >

    this.isLoadingResults = true;

    merge()

      .pipe(

        startWith({}),

        switchMap(() => {

          this.isLoadingResults = true;

          let article=this.dataService.get_article(this.guidarticle);

          return article;

        }),

        catchError(() => {

          this.isLoadingResults = true;

          this.isHttpError = true;

          return observableOf([]);

        })

      ).subscribe(response => {

        //--< async response >--

        this.article = response as ArticleReadModel;

        //console.log("response=" + response.toString());

        this.map_Data();  //*map json to local variables

        this.init_Data(); //*set title

        //--</ async response >--

      }

      );

    //--------</ load_DataSource() >--------

  }

  map_Data() {

    //--------< map_Data() >--------

    //*map Recordset to local variables

    console.log("id=" + this.guidarticle);

    this.dateedit = new Date(this.article.dateedit);

    //< convert iso Date >

    //*convert Iso-Date-Time to Javascript Date: 2021-01-20T08:00:00

    //this.sDateEdit = this.get_Date_String_from_Date(this.dtEdit);

    //</ convert iso Date >

    //--------</ map_Data() >--------

  }

  init_Data() {

    //--------< init_Data() >--------

    this.titleService.setTitle("👁 " + this.article?.title);

    //--------</ init_Data() >--------

  }

  //--------</ Export_Component >-------

}