Dynamic value append to the dynamic text field using Angular template reference

Question

I have following html code, when I click on the button need to be change same row text field value. My question is how to refer the input field and append the value?

app.component.html

<div *ngFor="let item of [1,2,3,4]; let i = index">
  <input type="text" #textField{{i}} />
  <button #btn{{i}} (click)="myEvent(i)">Click to Change</button>
</div>

app.component.ts

export class AppComponent  {
  myEvent(i) {
    if(i == 0) {
      // textField0 append a new value to the text field
    }
  }
}

Thanks all

Sample demo here

can you specify the possible result that you want to achieve or some sample output. didn't understand the end result or what you are trying to achieve? Are you trying to get the value into the text field ? — Joel Joseph
– Joel Joseph, Commented Dec 2, 2019 at 6:27

Prashant Pimpale · Accepted Answer · 2019-12-02 06:43:17Z

2

Another way by using @ViewChildren():

HTML:

<div *ngFor="let item of [1,2,3,4]; let i = index">
  <input type="text" #textField />  -- Here just use `#textField` without index
   <button #btn{{i}} (click)="myEvent(i)">
    Click to Change
   </button>
</div>

TS Code:

@ViewChildren("textField") textFields: QueryList<ElementRef>;

myEvent(i: any) {
  var feildsArray = this.textFields.toArray();
  feildsArray[i].nativeElement.value = "James";
}

Working_Demo

answered Dec 2, 2019 at 6:43

Prashant Pimpale

10.7k10 gold badges51 silver badges88 bronze badges

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

Comments

Prashant Pimpale · Accepted Answer · 2019-12-02 06:50:38Z

2

Try without using #template reference variable and just use [(ngModel)] instead:

HTML:

<div *ngFor="let item of [1,2,3,4]; let i = index">
    <input type="text" [(ngModel)]="value[i]"/>
    <button #btn{{i}} (click)="myEvent(i,value[i])">Click to Change</button>
</div>

<p *ngFor="let item of data">
    {{item}}
</p>

TS:

value = [];
data = [];

myEvent(i, value) {
  this.data[i] = value;
}

Demo

edited Dec 2, 2019 at 6:50

Prashant Pimpale

10.7k10 gold badges51 silver badges88 bronze badges

answered Dec 2, 2019 at 6:30

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

Adrita Sharma Over a year ago

No, but he can use it foe some other purpose like validation or something

Evgeniy Boytsov · Accepted Answer · 2019-12-02 06:37:12Z

You can make something like this

interface InputModel {
  id: number;
  value: number;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public inputs: InputModel[] = [
    {id: 1, value: 0},
    {id: 2, value: 0},
    {id: 3, value: 0},
    {id: 4, value: 0},
  ]

  public updateValue(index: number, valueString: string): void {
    this.inputs[index].value = this.inputs[index].value + 1;
  }
}

And your template will be

<div *ngFor="let item of inputs; let i = index">
  <input type="text" [value]="item.value"/>

  <button (click)="updateValue(i, item.value)">Click to Change</button>
</div>

Collectives™ on Stack Overflow

Dynamic value append to the dynamic text field using Angular template reference

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related