Anzeigen von HTML-Code in Angular
Wie kann man HTML Code in einer Webseite anzeigen?
Hierzu muss man in einem <div Tag > den innterHTML zuweisen..
<div [innerHTML]="[[article.html]]"></div> |
Angular html COmponente
Read-article.component.html
<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> |
Zur Ergänzung die compontent.ts
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 >------- }
|