title: How to add [ngStyle] directive dynamically in ionic 3 / angular
body: <p>This is what I had and it was working, it was bounded to <code>progress</code> method and it was displaying correctly:</p>
  
  <pre><code>&lt;div [ngStyle]="{'width.%': progress()}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now I have to create the element dynamically:</p>
  
  <pre><code>let myDiv = &lt;HTMLElement&gt;(document.createElement('div'));
  </code></pre>
  
  <p>but I can't seem to find a way to bind the progress method to my dynamically created element.</p>
  
  <p>Code using <a href="https://angular.io/api/core/Renderer" rel="noreferrer">renderer</a> as suggested by @fatemefazli which doesn't have change detection so it doesn't render when data becomes available nor listens to change of progress method: <a href="https://stackblitz.com/edit/angular-fpyfmn" rel="noreferrer">https://stackblitz.com/edit/angular-fpyfmn</a></p>
  
  <p>The decision to create DOM elements dynamically comes from the need to attach pan gesture using <a href="http://hammerjs.github.io/" rel="noreferrer">HammerJS</a> which requires to attach a listener like so:</p>
  
  <pre><code>addGestures(elem){
      var hammer = new Gesture(elem);
      hammer.listen();
  
      hammer.on('pan', (e) =&gt; this.Pan(e));
    }
  </code></pre>
  
  <p>I tried to create an event publish / emitter but I don't have a trigger to publish it.</p>