In an Angular page containing custom components, how should I make sure all IDs are unique to get rid of the warnings?

I have a custom component for text input and each of them has an internal field ID'ed as data. It causes the warning below to appear.

[DOM] Found 13 elements with non-unique id #data

I'm clear on why it happens and I understand that's a warning not an actual error. I also recognize the appropriateness of an ID being unique (in its scope).

I'm not entirely sure regarding the implications in my particular case. In my opinion, warnings are tolerable but not acceptable.

Is there a best-practice approach to get rid of the error? By the very concept of a GP component, some parts will be alike in each instance. Or is there a trick to unique'fy the IDs? Or perhaps a directive or such to let Angular know we're cool with the state as is?

The component uses @ViewChild("data") to refer the input control in the template below.

<div id="outer">
  ...
  <label for="data"></label>
  <input #data id="data" ... >
  <div *ngFor="let error of errors" class="row"> ... </div>
</div>

from In an Angular page containing custom components, how should I make sure all IDs are unique to get rid of the warnings?