title: adding a custom HTMLElement in Typescript
body: <p>Hi I am new to angular and this may seem obvious to someone with more experience, but i am trying to add a custom html element to a page on button click. I cant figure out how.</p>
  
  <p>My html and ts files </p>
  
  <p>TS FILE:</p>
  
  <pre><code>@Component({
    selector: 'app-conter',
    templateUrl: './conter.component.html',
    styleUrls: ['./conter.component.css']
  })
  export class ConterComponent extends HTMLElement {
     _ref;
     constructor(id: string) {
      super();
      this.draggable = true;
      this.setAttribute('(drag)', 'drag($event)');
      this.setAttribute('id', id);
     }
     @Input()
    counterValue = 0 ;
     drag(ev) {
       ev.dataTransfer.setData('text/html', this);
     }
     protected validation() {
     }
    increment() {
      this.counterValue++;
    }
    decrement() {
      this.counterValue--;
    }
    setCounter(value) {
      this.counterValue = value;
        }
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="cont"&gt;
  &lt;button (click)="increment()"&gt;+&lt;/button&gt;
  {{counterValue}}
  &lt;button (click)="decrement()"&gt;-&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>where i add the element :</p>
  
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
    constructor() {
    }
    ngOnInit() {}
    generate() {
  
                    &lt;-- Method where i want to add my HTMELement to the page
    }
  </code></pre>