I was working on a project. There i have to add a textarea and two tabs above it. Now there, I was trying to do two things:

1. I wanted the placeholder to get changed based on the tabs selected.
2. Send a value from the selected tab, i.e, if I select the 1st tab then the value of the tab (say 'test1') along with the data from the textarea should be send to the API. Can someone help me with this? This is my stackblitz

CodePudding user response：

You need to add click function (click)="tabClick($event.target.innerText)" on the tab and pass event to capture the innertext and a binding on textarea as [placeholder]="placeholderText"

App.component.html

 <div>
  <ul  role="tablist" style="cursor: pointer;">
    <li >
      <p
        style="color: black;font-weight: 200;"
        
        data-bs-toggle="tab"
        role="tab"
        aria-controls="challenge"
        aria-selected="true"
        (click)="tabClick($event.target.innerText)">
        Test1
      </p>
    </li>
    <li >
      <p
        style="color: black;font-weight: 200;"
        
        data-bs-toggle="tab"
        role="tab"
        aria-controls="terms"
        aria-selected="true"
        (click)="tabClick($event.target.innerText)">
        Test2
      </p>
    </li>
  </ul>
  <textarea
    id="text-area"
    
    [placeholder]="placeholderText"
  ></textarea>
</div>

app.component.ts

    export class AppComponent {
      placeholderText: any = '';
      constructor() {}
    
      tabClick(text: any) {
        this.placeholderText = text;
    
        //  ** API
      }
    }

Can refer code on stackblitz