title: How to append dynamic DOM elements from a directive in Angular 2?
body: <p>I have an Angular 1.x directive that appends an element. In short:</p>
  <pre class="lang-ts prettyprint-override"><code>app.directive('mydirective', function() {
    template: '&lt;ng-transclude&gt;&lt;/ng-transclude&gt;',
    link: function(el) {
      var child = angular.element(&quot;&lt;div/&gt;&quot;);
      el.append(child);
    }
  </code></pre>
  <p>I can migrate this directive to Angular 2 like this:</p>
  <pre class="lang-ts prettyprint-override"><code>@Directive({
    selector: '[mydirective']
  })
  export class MyDirective implements OnInit {
    constructor(private elementRef: ElementRef) { }
  
    ngOnit() {
      var child = angular.element(&quot;&lt;div/&gt;&quot;);
      this.elementRef.nativeElement.append(child);
    }
  }
  </code></pre>
  <p>What's troubling me is this remark in the <code>nativeElement</code> official documentation:</p>
  <blockquote>
  <p>Use this API as the last resource when direct access to DOM is needed.</p>
  </blockquote>
  <p>My question is - how could I properly migrate this directive to Angular 2? My only requirement is to build an element dynamically and append it to the element with the directive.</p>