How to maintain a unique ID for Angular Template Element

[Rahul Kumar]

Hi Team,

I have a Table Angular component. Now i am instantiating that component multiple times using same template something like below:

Assume i have created 7 tables out of this template , how can i maintain different unique id for each table.

Because when i try to do document.getElementByID('unique') , it always gives me first table because ID of all tables tags are same on DOM.

<table *ngIf="settings" class="table" id="unique" value="1"

[Sander Elias]

Hi Rahul,

Id's need to be unique, but HTML isn't enforcing anything. 
But even when the id is unique, how are you going to know that for your `document.getElementByID('unique')` because if it is unique it will never be the same?

You need to know a bit more about a page to get a certain table out of it. Also, I'm pretty sure, you are better off doing, whatever it is, inside the angular components/services that create the page.

Regards

Sander

[Rahul Kumar]

Thanks Sander, actually I need fixed and unique I’d for each table and some mechanism to know which I’d belongs to which table in component ts file , currently all tables on the page has same id, which is string 'unique' ,  but it is fixed string , so whenever I do getelementbyID('unique') , I get only fist table , though what I want reference of individual table whenever i do any interactive action on that .

Below is my template:

<caption>{{ settings.metadata.label }}</caption>

<table *ngIf="settings" class="table" [id]="getId('name')" value="1" type="hidden" placeholder="Hidden input recording the html id for dynamic delete buttons">

  <thead>

    <tr>

      <th>Action</th>

      <th *ngFor="let header of settings.headers;let k=index"> {{ header }} </th>

    </tr>

  </thead>

  <tbody>

    <tr *ngFor="let record of settings.series;let i=index">

      <td (click)="deleteRow(i)">

        <button class='btn btn-danger btn-sm delete'>X</button>

      </td>

      <td contenteditable='true' *ngFor="let item of record | keyvalue: originalOrder">

        {{item.value}}

      </td>

    </tr>

    <tr>

      <td>

        <button style="margin-right: 5px" (click)="addRow()" class='btn btn-success btn-sm'>+</button>

        <button style="margin-right: 5px" (click)="push()" class='btn btn-dark btn-sm'>PUSH</button>

      </td>

    </tr>

  </tbody>

</table>

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/50c5c0f5-5bb4-46e9-a32e-c147b22f64df%40googlegroups.com.

[Sander Elias]

Let me put it otherwise:

his code:

document.querySelectorAll('table').forEach((elm,i) =>  elm.setAttribute('id','imnumber'+i)

will set a unique id on every table. I don't think that will solve your issue. You probably need to set it to something that conveys's meaning to the table. I think you need to split out your tables into components of their own that contain the functionality you are now trying to bolt on.

Regards

Sander

[Rahul Kumar]

Thanks Sander. I am trying while passing some data as input to table.

So currently i wanted to know how to select that element using query selector or what.

I have caption of each table which is unique and i have access to that caption in .ts file as well.

Below line gives me actual caption of table.

Now i will check in code 

if (document.getElementById('datatable1').previousElementSibling.innerHTML== < caption which is there  in .ts file){

// select that element

}

In short , i want to write a query which can select a table out of all, with given caption , can you please help me to write this small piece of code, ?

document.getElementById('datatable').previousElementSibling.innerHTML

--

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/1f4dd49d-10fa-499b-9e99-c164e43904ad%40googlegroups.com.

[Rahul Kumar]

Below logic does not work:

 var table;

    if(document.getElementById('datatable').previousElementSibling.innerHTML== this.label){

      table = document.getElementById("datatable") as HTMLTableElement

    }

[Rahul Kumar]

So question is now , i want to write a query in my .ts file (either using JS) to select table element whose previous sibling element value is given.

where template is:

<caption>{{ settings.metadata.label }}</caption>

<table *ngIf="settings" class="table" id="datatable">

[Rahul Kumar]

Assume my HTML dom is like that post rendering :

<caption>TEST Value</caption>

<table *ngIf="settings" class="table" id="datatable">

<caption>TEST Value1</caption>

<table *ngIf="settings" class="table" id="datatable">

<caption>TEST Value</caption>

<table *ngIf="settings" class="table" id="datatable">

<caption>TEST Value2</caption>

<table *ngIf="settings" class="table" id="datatable">

<caption>TEST Value3</caption>

<table *ngIf="settings" class="table" id="datatable">

Rahul

[Sander Elias]

Hi Rahul,

You are missing my point. Why are you trying to read data out of the DOM when you already have it available in your code? the DOM is your app's output, not its data-source.

Regards

Sander

[Rahul Kumar]

you are right Sander. But I have editable table, I mean based on one + button click, i keep on adding new rows , so when user fills those new rows , that data needs to be read and pushed to some table data array.

So I need to update my table data array whenever user adds new row with some data by manually typing in table cell!

Rahul

--

You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/b233b5f1-01f2-4d17-8ad6-ce52ef3d8dfa%40googlegroups.com.