title: Either i am using Angular Renerer2 wrong, or it is broken. Can anyone figure this out?
body: <p>Using plain old javascript, this is so simple:</p>
  
  <pre><code>myElement.style.setProperty('property', 'value', 'important');
  </code></pre>
  
  <p>In Angular, not so much.
  I have done an exhaustive search absolutely everywhere and can not find one single example for how to do this, so i am asking the question here.</p>
  
  <p><strong>Either Renderer2 in Angular is broken or i am just doing this wrong.</strong></p>
  
  <p>i import the following into my component:</p>
  
  <pre><code>import {ElementRef, Renderer2, RendererStyleFlags2 } from '@angular/core';
  </code></pre>
  
  <p>and, in my constructor:</p>
  
  <pre><code>constructor(private elRef: ElementRef,
              private renderer: Renderer2);
  </code></pre>
  
  <p>i set a style on an element in my template that works without issue:</p>
  
  <pre><code>this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff');
  </code></pre>
  
  <p>when i try to set the important flag like this:</p>
  
  <pre><code>this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', RendererStyleFlags2.Important);
  </code></pre>
  
  <p>or like this:</p>
  
  <pre><code>this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', flags:RendererStyleFlags2.Important);
  </code></pre>
  
  <p>or like this:</p>
  
  <pre><code>public myFlags:RendererStyleFlags2;
  this.renderer.setStyle(this.elRef.nativeElement.querySelector('.my-div'), 'color', '#fff', myFlags.Important);
  </code></pre>
  
  <p>or in another way like this:</p>
  
  <pre><code>public myFlags:RendererStyleFlags2.Important;
  public myFlags:RendererStyleFlags2.Important = 1;
  </code></pre>
  
  <p>along with many other attempts using arrays and objects:</p>
  
  <pre><code>myFlags:any = {important: 1}
  </code></pre>
  
  <p>None of the above works.</p>
  
  <p>This is the method as it exists in angular core:</p>
  
  <pre><code>setStyle(el: any, style: string, value: any, flags: RendererStyleFlags2): void {
      if (flags &amp; RendererStyleFlags2.DashCase) {
        el.style.setProperty(
            style, value, !!(flags &amp; RendererStyleFlags2.Important) ? 'important' : '');
      } else {
        el.style[style] = value;
      }
    }
  </code></pre>
  
  <p><strong>Can anyone tell me what i am doing wrong here?</strong></p>