Push value from input to object array and update tab names labels- Angular

bel 0
Viewed 51

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

ngfor angular-material tabs arrays angular
2 Answers

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.

Vasileios Kagklis0

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.

UPDATE:

since you have used tab names to create the text in the parent component.

In the submit method

need to do the tab name update before emitting the updateDataEvent.

 submit(): void {

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

    this.updateDataEvent.emit({
      formdata: this.form.getRawValue(),
      tabs: this.tabs,
    });

    
  }
Kelum Bandara0
Related