Component module.ts

applicantList = [
        { name: "Scar", address: "Lair on the Hill", dateOfJoin: "10/2/2020" },
        { name: "Jack Sparrow", address: "7 Seas, Pirate Island" },
        { name: "Shrek", address: "Swamp Fortress" },
        { name: "Mickey Mouse", address: "Disney Lane" },
        { name: "SpongeBob SquarePants", address: "Pineapple Under The Sea" },
        { name: "Jerry", address: "Mouse Hole" },
        { name: "Buzz Lightyear", address: "Space Command Center" }
      ];

      templateList: Object[] = [];

      displayTemplate(name: string, address: string, dateOfJoin: string) {
        this.templateList = [];
        for (let element of this.applicantList) {
          if (element.templates != null) {
            for (let template of element.templates) {
              this.setTemplateText(template, address, name, dateOfJoin);
              this.templateList.push(template);
            }
          }
        }
        console.log("Template list", this.templateList);
      }

      setTemplateText(template: any, address, name, dateOfJoin) {
        let text = template.contents[0].text;
        if (template.type === "Intro") {
          const nameToSwap = this.getRevisedName(text);
          if (name !== undefined) {
            template.contents[0].text = text.replace(nameToSwap, name.concat(","));
          } else template.contents[0].text = text.replace(nameToSwap, "Not Available");
        } else if (template.type === "Location") {
          if (address !== undefined)
            template.contents[0].text = text.replace(text, address);
          else template.contents[0].text = text.replace(text, "N/A");
        } else if (template.type === "Joining Date") {
          const joinDateToReplace = this.getRevisedDateOfJoin(text);
          if (dateOfJoin !== undefined)
            template.contents[0].text = text.replace(joinDateToReplace, dateOfJoin);
          else template.contents[0].text = text.replace(joinDateToReplace, "N/A");
        }
        console.log("Template Text ==", template.contents[0].text);
      }

      getRevisedName(text: string) {
        const splitArray = text.split(" ");
        if (splitArray[2].includes(",")) 
          return splitArray[1] + " " + splitArray[2];
        else return splitArray[1];
      }

      getRevisedDateOfJoin(text: string) {
        const splitArray = text.split(" ");
        return splitArray[5];
      }

Component template.html

<hr /><br />
<div class="row">
    <div class="col-4">
        <ul>
            <ol *ngFor="let item of applicantList">
                <a (click)="displayTemplate(item.name,item.address,item.dateOfJoin)">{{item.name}}</a><br />
                <a (click)="displayTemplate(item.name,item.address,item.dateOfJoin)"><small>{{item.address}}</small></a>
                <hr />
            </ol>
        </ul>
    </div>
    <div class="col-8">
        <div class="templateDiv">
            <div *ngFor="let temp of templateList">
                <span><strong class="textTemp">{{temp.type}}</strong></span>
                <br/>
                <div *ngFor="let content of temp.contents">
                    <p class="txt">{{content.text}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

I have updated your code, specifically the displayTemplate method.

I have made some changes to the showTemplate function so that now it properly works when you add something in the clause, although it may not work if the names of the clauses are unknown.

showTemplate(name: string, address: string, dateOfJoin: string) {
    this.clauseList = [];
    let tempList = new Array<any>();
    tempList = JSON.parse(JSON.stringify(this.templateList));
    for (let template of tempList) {
      if (template.clauses != null) {
        for (let clause of template.clauses) {
          this.setClauseText(clause, address, name, dateOfJoin);
          this.clauseList.push(clause);
        }
      }
    }
    console.log("Clause list", this.clauseList);
  }

  setClauseText(clause: any, address, name, dateOfJoin) {
    let text = clause.texts[0].text;
    if (clause.clauseName === "Introduction") {
         const nameToReplace = this.getText(text);
      if (name !== undefined) {
        clause.texts[0].text = text.replace(nameToReplace, name.concat(","));
      } else clause.texts[0].text = text.replace(nameToReplace, "N/A");
    } else if (clause.clauseName === "Address") {
       const addressToReplace = this.getText(text);
      if (address !== undefined)
        clause.texts[0].text = text.replace(addressToReplace, address);
      else clause.texts[0].text = text.replace(text, "N/A");
    } else if (clause.clauseName === "Date Of Joining") {
      const dateOfJoinToReplace = this.getText(text);
      if (dateOfJoin !== undefined)
        clause.texts[0].text = text.replace(dateOfJoinToReplace, dateOfJoin);
      else clause.texts[0].text = text.replace(dateOfJoinToReplace, "N/A");
    }
    console.log("ClasueText ==", clause.texts[0].text);
  }

  getText(text: string) {
    const splitArray = text.split(" ");
    for (let elementSplit of splitArray)
      if (elementSplit.includes("<<")) return elementSplit;
  }
}