Angular // ng-select Use interpolation within a textarea on a text pulled from an array

Question

Still in my very first days with Angular and ran into a problem i can't get my head around. What I am trying to accomplish is sort of creating a way to have a persons name added to a message template.

The templates are loaded from a file like this

this.http.get('../../assets/templatefiles/customtemplates.json').subscribe(data => {this.templateArray = data as any [];

The structure of the JSON file is as follows

[{
    "Id": 1,
    "Type": "SR Templates",
    "Name": "Message 1",
    "Body": "Some meaningful text here"
},
{
    "Id": 2,
    "Type": "SR Templates",
    "Name": "Message 2",
    "Body": "Some more meaningful text here"
},
{
    "Id": 3,
    "Type": "GTFO Templates",
    "Name": "Message 3",
    "Body": "Guess what? Exactly, some even more..blahhh"
}]

All good so far. Then, in my template I use ng-select to create the dropdown list to display the options grouped by Type

<ng-select [items]="templateArray"
              bindLabel="Name"
              bindValue="Body"
              groupBy="Type"
              [(ngModel)]="selectedTemplate"
              >
    
        <ng-template ng-optgroup-tmp let-item="item">
          <strong>{{item.Id}}</strong>
        </ng-template>
    </ng-select>

So far...working it seems. Templates are grouped by Type and show up in the drop down just fine. Below the selection is a textarea in which the "Body" value is supposed to be displayed. Works fine as well, when selecting a template from the drop down the text shows fine in the textarea.

The problem I am facing is that there is an input field for the persons name the message will be send to. I get the name as follows:

 <input type="text" [(ngModel)]="srcName" class="form-control"  placeholder="Name"> 

The bit confusing me is how to get/add the persons name to the message using interpolation? I was hoping for something like just having to change the text in the JSON and adding the interpolation to it but apparently that does not work hehe.

{
    "Id": 1,
    "Type": "SR Templates",
    "Name": "Message 1",
    "Body": "Dear {{srcName}, Some meaningful text here"
}

I've been searching up and down, but am ultimately stuck and am desperate for a nudge in the direction I would have to go to actually get that name inserted in the textarea together with the template from the array...

Answer 1

You can make a function that concatenates your selected template and the name in you input, like so:

  onSubmit() {
    this.message = `Dear ${this.srcName}, ${this.selectedTemplate}`;
  }  

And then you can add a button that executes this function:

<button (click)="onSubmit()">Submit</button>  

Now whenever you select the template you want and add the name you want to the input and click on submit button, you will get a concatenated message with the info you want.
Here is a live demo if you want more explanation.
In the live demo a used a normal HTML select, but it should work the same with angular material select.

##EDIT

If you need to put your srcName inside of your templates body, you will have to create a place holder in your template's body, something like:

"Guess what? Exactly {srcName}, some even more..blahhh"

instead of:

"Guess what? Exactly, some even more..blahhh"  

Then you will have to change the onSubmit function:

  onSubmit() {
    this.message = this.selectedTemplate.replace('{srcName}', this.srcName)
  }

I also added the changes to to the live demo.