Render Multiple Value in Textarea

Amit Kumar Singh

2y904Angular

Hi,

I have to display like below in textarea when user type in name, Address and Phone

Name: ABC

Address: XYZ

Phone: XXX

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jignesh Kumar2y ago

Hi Amit,

Please use this one which will help you out,

UI Page :

TypeScript :

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  textbox1: string = '';
  textbox2: string = '';
  textbox3: string = '';
  resultTextarea: string = '';

  concatenateValues() {
    // Concatenate values from textboxes
    this.resultTextarea = `$ Name : {this.textbox1} \n Address : ${this.textbox2} \n Phone : ${this.textbox3}`;
  }
}

Ramesh Palanivel2y ago
Hi Amit,

Assign textaresvariable with empty string & Apply two way binding for all you inputs fields and concate the string with textaresvariable. Please refer two way binding here,

https://www.knowledgehut.com/blog/web-development/two-way-binding-in-angular
+2