I want to be able to append the selected value from a mat-select to the text area below on click

Question

I have been asked to do this project using Angular in work and honestly not touched Angular 2 before. I can do this no issue using jQuery but I am having trouble getting it to work in Angular. Basically, in this modal I have a form, and it is just a template in which you can choose what information you want to include within an email. I have a mat-select dropdown and depending on what has been selected, I want to then append that to the text area below on click of the check icon.

Example: "Hello {{Client Name}}, we are happy to be working with {{Company Name}}".

The values inside the '{{ }}' are the options selected in the mat-select above.

I will include my code below but unfortunately it isn't a lot to go off due to not being too sure where to start.

Component.html

<div fxFlex>
  <mat-form-field fxFlex="90" appearance="outline">
    <mat-label>Placeholder</mat-label>
      <mat-select id="placeholderValue" matInput required>
        <mat-option value="name">Client Full Name</mat-option>
        <mat-option value="phone">Client Phone Number</mat-option>
        <mat-option value="email">Client Email Address</mat-option>
        <mat-option value="companyName">Company Name</mat-option>
      </mat-select>
  </mat-form-field>
  <mat-icon fxFlex="10" fxLayoutAlign="center center" (click)="addPlaceholder()">check</mat-icon>
</div>
  
<mat-form-field appearance="outline" class="textarea">
  <mat-label>Message</mat-label>
  <textarea id="placeholderText" matInput formControlName="Description"></textarea>
</mat-form-field>

Component.ts

addPlaceholder(){

}

I apologise for the lack of code, I have been working on this regarding the UI and then this for the past few days, have been looking around for a way to do it and tried to convert my way in jQuery over to Angular and am assuming I could use some form on (change) function?

Here is an image of how it needs to look (multiple selects can be chosen so it also cannot replace the current select in the textarea).

I would appreciate any advice or help given. Thank you in advance.

Answer 1

I suggest you to lookup at angular two-way binding property.( https://angular.io/guide/two-way-binding ).

To change dinamically the value of the select you can use [(ngModel)] used like this:

 <mat-select id="placeholderValue" [(ngModel)]="variableName" matInput required> <mat-option value="name">Client Full Name</mat-option>... </mat-select>

The variable will be updated automatically every time you change the selected value on the select field.

Another way to implement this could be to use (selectionChange) event on the mat-select field and link a function that will be executed after every change on the select value.

 public myFunction(event: any) { this.myVariable = event.value; // other code that you need }

 <mat-select id="placeholderValue" (selectionChange)="myFunction($event)" matInput required> <mat-option value="name">Client Full Name</mat-option>... </mat-select>

To output your variable in the html template you could use string interpolaion ( https://angular.io/guide/interpolation ).

To dinamically change the html structure you could use the *ngIf directive ( https://angular.io/api/common/NgIf ).