title: How do I set an img title attribute with html entities in Angular?
body: <p>From the backend I will receive strings like '&copy; Acme'.
  Now I have the problem setting these as title attributes to img tags.</p>
  
  <p>[title] or [attr.title] will set the string as it is (<code>&amp;copy;</code>, not ©)</p>
  
  <p>and I have not been able to figure out a directive or pipe that helps to render html entities in the attribute. With a directive like this</p>
  
  <pre><code>import {Directive, ElementRef, Inject, Input, OnInit, Renderer2, SecurityContext} from '@angular/core';
  import {DomSanitizer} from '@angular/platform-browser';
  
  @Directive({
    selector: '[trustedTitle]'
  })
  export class TrustedTitleDirective implements OnInit {
  
    @Input() trustedTitle: string;
  
    constructor(@Inject(DomSanitizer) private sanitizer: DomSanitizer, private el: ElementRef, private renderer: Renderer2) {
    }
  
    ngOnInit() {
      const safeHtml = this.sanitizer.sanitize(SecurityContext.HTML, this.trustedTitle);
      console.log('Trusted Title:', safeHtml);
      this.renderer.setAttribute(this.el.nativeElement, 'title', safeHtml);
    }
  
  }
  </code></pre>
  
  <p>for example I end up with a title displaying <code>&amp;#169; Acme</code>.</p>
  
  <p>BTW: I'm using an Angular version ^4.0.0.</p>
  
  <hr>
  
  <h2>Update:</h2>
  
  <p>The problem seems to be that the javascript string variable needs to be reparsed. This now seems obvious and usually I would of course have done it using <code>[innerHtml]</code>. But since I had to deal with the title attribute only I ended up with a custom component for now:</p>
  
  <pre><code>import {Directive, ElementRef, Input, OnInit, } from '@angular/core';
  
  @Directive({
    selector: '[trustedTitle]'
  })
  export class TrustedTitleDirective implements OnInit {
  
    @Input() trustedTitle: string;
  
    constructor(private el: ElementRef) {
    }
  
    ngOnInit() {
      this.el.nativeElement.title = this.parseHtmlTextStr(this.trustedTitle);
    }
  
    /**
     * Parses HTML Entities in a string.
     * return parsed string or fall back to original.
     */
    parseHtmlTextStr(str: string): string {
  
     const temp = document.createElement('template');
     temp.innerHTML = str;
     str = temp.innerHTML;
  
     temp.remove();
     return str;
   }
  }
  </code></pre>
  
  <p>This looks and feels still very hacky to me. So if someone comes up with something more elegant it would be very much appreciated.</p>