[FIXED] access p-inplace content value from onDeactivate

Issue

I’m working with p-inplace of primeNg. I want to call a function when onDeactivate is called, using the value of pTemplate content.

code snippet:

<p-inplace [closable]="true" (onDeactivate)="doSomething(???)">
   <ng-template pTemplate="display">
      <label>xxx</label>
   </ng-template>
   <ng-template pTemplate="content">
      <input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData">
   </ng-template>
</p-inpace>

I want to send the value typed into myInput where the ??? are. If it were not in the template, I could send by doSomething(myInput.value), but since it is within a template, it is not recognized there.

Does anyone have a solution or a workaround for this?

Solution

Unfortunately you can not use template-variable-reference as you already know.

I solution to your problem would be to save the changes in an other variable in your template so you can use it when you need it and leave the parameter in your template function doSomething() empty.

<p-inplace [closable]="true" (onDeactivate)="doSomething()">
   <ng-template pTemplate="display">
      <label>xxx</label>
   </ng-template>
   <ng-template pTemplate="content">
      <input type="text" #myInput pInputText [ngModel]="someReadonlyInitialData" (ngModelChange)="someData = $event">
   </ng-template>
</p-inpace> 

And inside your ts file:

someData: string;

doSomething() {
  /* now your value is inside this.someData /*
}

PS: I guess that you don’t want to use 2 way binding, If you don’t mind, you do not need to create a second variable. You can just:

[(ngModel)]="someData" 

Answered By – StPaulis

Answer Checked By – Mary Flores (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published