2

I have to make use of innerHtml directive but it ignores the styling of the elements so I created a custom safeHtml pipe to render the CSS of the element basically, I am injecting HTML elements to my dom using innerHtml. But the pip doesn't work.

app.module.ts

import { ViewComponent } from './view/view.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { CategoryComponent } from './category/category.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { UserComponent } from './user/user.component';
import { SafeHtmlPipe } from './view/post.pipe';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ViewComponent,
    CategoryComponent,
    AboutComponent,
    ContactComponent,
    UserComponent,
    SafeHtmlPipe
  ],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

post.pipe.ts

import { DomSanitizer } from "@angular/platform-browser";
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "safeHtml" })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}

  transform(value: string) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

view.component.ts

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "app-view",
  templateUrl: "./view.component.html",
  styleUrls: ["./view.component.scss"]
})
export class ViewComponent implements OnInit {
  id: number;
  card = {
    title: `Title here`,
    shortDesc: `Short desc`,
    author: `Author`,
    thumbnail: `Thumbnail URL`,
    datePublished: `date`,
    content: `card content`
  };

  constructor(private route: ActivatedRoute) {}

  showPostContent() {
    document.getElementById("postContent").innerHTML = this.card.content;
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params.id;
    });
    // this.showPostContent();
  }
}

view.component.html

<div [innerHtml]="card.content | safeHtml"></div>


How can I resolve this issue?

Yogesh Aggarwal
  • 1,071
  • 2
  • 12
  • 30
  • Are the styles for card content specified in parent component css or are these inline in the card content? – Saksham Sep 21 '19 at 18:15

2 Answers2

3

You should use a simple ViewChild().

HTML:

<div #simpleDiv></div>

COMPONENT

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit  {
  @ViewChild('simpleDiv', { static: true }) simple;

  ngAfterViewInit() {
    this.simple.nativeElement.innerHTML = 'AAA';
  }
}

stackblitz example

Be aware however that there are very few legitimate reasons to use innerHTML directly in angular. and whatever it is you're trying to achieve. can most likely be done in a safer more, 'angularish' way.

wherever I see innerHTML in a modern framework application, it almost always ends up being some web developer who tries to achieve something, in the tools he already knows, going around the framework, rather than learning how to do it properly using the framework.

Alas, I can be wrong.

Stavm
  • 7,833
  • 5
  • 44
  • 68
  • The styling works only in inline mode but when a class is given (defined in the app.component.css also) it doesn't work. I want the defined class on the injected elements to work properly as same as the DOM manipulation in vanilla javascript. (In reference to the above stackblitz) – Yogesh Aggarwal Sep 21 '19 at 10:16
  • @YogeshDeveloper place your css in the `styles.css` file. not in the app component's – Stavm Sep 21 '19 at 10:34
  • Nothing happened – Yogesh Aggarwal Sep 21 '19 at 10:36
  • @YogeshDeveloper changed a bit the stackblitz from above: [example](https://stackblitz.com/edit/angular-fa4gwf?file=src/app/app.component.ts) – Stavm Sep 21 '19 at 10:38
  • @YogeshDeveloper can you post the solution – Saksham Sep 21 '19 at 18:11
  • 1
    The problem is that the styles are not component scoped anymore. Did anyone found a proper working solution where the styles are working as usual within component scoping? (the css prefixing) – 5422m4n Nov 29 '19 at 11:32
0

Regarding the issue that styles from this innerHTML will bleed out, see Angular 2 - innerHTML styling and https://github.com/angular/angular/issues/7845

5422m4n
  • 790
  • 5
  • 12