I have a reactive form and I am using Material Angular, with a tab group and the tab names comes from an array, I need to add the possibility of changing those tabs names for new ones. If a write a new title in the input I need to update the name of the tab label.

I’m getting the value from the input, but I can’t figure it out how to send it to the names of the tabs:

app.component.ts

this.newTitleArm = selection.formdata.titleTextArms;
console.log(this.newTitleArm);

STACKBLITZ

SCREENSHOT

CodePudding user response：

The problem is that you are not updating the respective tab name anywhere, neither in your submit, nor in your updateData.

You submit the value, but you are not updating the tabs.

For example, in your submit method add this hard-coded update and then press the Save button:

this.tabs[0].name = "test";

Because now you updated the first tab's name, you should see the change.

CodePudding user response：

Can you have a look at this Stackblits

Note that I have modified the submit method and have added

if(this.form.get('titleArms').value === 'changeArm'){
  this.tabs[this.selected.value].name = this.form.get('titleTextArms').value;
}

Here I'm assigning the titleTextArms control value to selected tab name. You can get selected tab by this.tabs[this.selected.value]

Also added the if condition to check selection of radio button.