UNIQUE ID inside an Angular Component

If you use an id for a HTML element inside your angular component and then use

document.getElementById

to retrieve it, bear in mind that someone can have multiple instances of your component on the same page. So here is a simple trick to deal with

1. In the HTML component put

<div [id]=”‘htmlOutput’+myId”></div>

2. In the ts file put

export class MyComponent{

static id:number=0;

myId:number=0;

constructor(/*arguments*/){

this.myId=++DisplayBlocklyComponent.id;

}

}

and for retrieving the HTML element

document.getElementById(‘htmlOutput’+this.myId)

That is all;