How to apply styling for html injected in Angular component using innerHtml?

Question

I am trying to plug in some html content in an Angular component The components fetches the HTML using a service call and sets the property which is bound to innerHtml of the div.

There is a bunch of styles that needs to be set for this html plug, as given below in the scss content.

But I am not sure how to do this .... tried ngStyle and ngClass to return the style and use in the div but that did not work. Can anyone please tell me how to apply style for innerHtml? - Thanks

  <div class [innerHTML]="html"></div>

  private fetchEmail() {
    const d = this._intl.formatDate(this.today, 'yyyy-MM-dd');
    this._vmService.getVariatioMarginEmail(d).subscribe(e => {
      if (!isUndefined(e) || e.length > 0) {
        this.html = e.html;
      }
    });
  }


.table {
    border-collapse: collapse;
    border: 1px solid #999;
    font: normal 11px verdana, arial, helvetica, sans-serif;
    color: #F6ECF0;
    background: transparent;
  }

  th {
    border: 1px solid #999;
    text-align: left;
    vertical-align: middle;
    font-weight: 700;
    background: #333a56;
    color: #fff;
    padding: 5px 10px;
  }

  td {
    border-collapse: collapse;
    border: 1px solid #999;
    padding: 5px 10px;
    color: #555;
  }

  tbody td a {
    background: transparent;
    text-decoration: none;
    color: #F6ECF0;
  }

  a {
    font: normal 11px verdana, arial, helvetica, sans-serif;
  }

Anand · Accepted Answer · 2018-04-02 21:11:56Z

1

I have to use a class and ngdeep

<div class ='emailClas" [innerHTML]="html"></div>

    .emailClass ::ng-deep table {
    border-collapse: collapse;
    border: 1px solid #999;
    font: normal 11px verdana, arial, helvetica, sans-serif;
    color: #F6ECF0;
    background: transparent;
  }

  .emailClass ::ng-deep  th {
    border: 1px solid #999;
    text-align: left;
    vertical-align: middle;
    font-weight: 700;
    background: #333a56;
    color: #fff;
    padding: 5px 10px;
  }

  .emailClass ::ng-deep td {
    border-collapse: collapse;
    border: 1px solid #999;
    padding: 5px 10px;
    color: #555;
  }

  .emailClass ::ng-deep  tbody td a {
    background: transparent;
    text-decoration: none;
    color: #F6ECF0;
  }

  .emailClass ::ng-deep  a {
    font: normal 11px verdana, arial, helvetica, sans-serif;
  }

edited Apr 2, 2018 at 21:11

answered Apr 2, 2018 at 18:19

Anand

1,7895 gold badges33 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anand Over a year ago

It appears ng-deep is undocumented and who know if it will still work in future

Estus Flask Over a year ago

ng-deep is documented, angular.io/guide/component-styles#deprecated-deep--and-ng-deep . And it will work until the arrival of appropriate alternative

Collectives™ on Stack Overflow

How to apply styling for html injected in Angular component using innerHtml?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related