Angular - How can I access Template variable/reference from typescript?

Question

In my Angular project I am trying to access the value present in <td [innerHTML]='rupee.replaceHTML' #term></td> and assign it to vaiable newdata.

More on the functionality here, I have 2 buttons change and concourse. The value present in below HTML will change when I press concourse button. I was to save that changed value in variable newdata using localStorage so that I can access it later.

How can I access that html value and store it in new_data?

.html file

<mat-list-item>New Life</mat-list-item>
 <mat-list class="textFields">
   <table>
     <tr>
       <td [innerHTML]='rupee.replaceHTML' #term></td> ---> Access whatever value is here
      </tr>
     </table>                
 </mat-list>

//button
<button mat-raised-button type='button' (click)='concourse(kada, term)'>Confirm

component.ts

export class Pinky { 
  @ViewChild('term') editElem!: ElementRef<HTMLTableDataCellElement>;
    

//button function       
concourse(rec: FillData, nada: HTMLTableDataCellElement) {
  const { a,b,c,d } = rec;
  let maan= nada.innerText;
  localStorage.setItem('FillData', JSON.stringify(rec));

   var new_data = JSON.parse(localStorage.getItem('FillData') || '{}') as FillData

-------------------//Can I access #term value here?-------------------------

    new_data.{{?}}= maan;                 ----------> Assign the  value here ?
    localStorage.setItem('FillData', JSON.stringify(new_data));
}

Interface

export interface DraneMan {
  maan:string;
}

pmoleri · Accepted Answer · 2021-03-20 02:44:47Z

1

You already have a @ViewChild('term') so you can just get it from this.editElem.innerHTML.

What's more, you have a binding [innerHTML]='rupee.replaceHTML', so, reading from the DOM something that is bound seems like the wrong data flow. I would just use ruppee.replaceHTML as source of truth.

answered Mar 20, 2021 at 2:44

pmoleri

4,5181 gold badge20 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tejas Mehta Over a year ago

You mean to use newData.maan.editElem.innerHTML ? I have add interface. If I use this it says Property 'innerHTML' does not exist on type 'string'.ts

Collectives™ on Stack Overflow

Angular - How can I access Template variable/reference from typescript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related