title: How to clear element from all children in Angular (5+) Renderer2?
body: <p>Angular Renderer2 is recommended to manipulate DOM programatically. </p>
  
  <p>In my directive i take some <code>el.nativeElement.innerText</code>, transform this text and want to add it to my element:</p>
  
  <p><code>
  const text = renderer.createText(`${el.innerText}%`);
  renderer.appendChild(el, text);</code></p>
  
  <p>The problem is with <code>el</code> - it already has the text, so it appends transformed text after it.</p>
  
  <p>I checked Renderer2 docs and it seems I can use <code>removeChild()</code> without passing reference to child, so I can't use Renderer2 to clear component first? </p>
  
  <p>In this case only way to achieve it is using <code>innerText = ''</code> before renderer methods, which makes it pointless.</p>