edit title (mat-expansion-panel-header) on the go in Angular

Published

I want to change my title on live

HTML Code

    <ng-container *ngFor="let group of formData.groups">
        <!-- Panels-->
        <mat-accordion>
            <mat-expansion-panel cdkDrag>
                <mat-expansion-panel-header>
                    {{group.formGroupName}}
                </mat-expansion-panel-header>
        
        </mat-accordion>
    </ng-container>

i was try to add input like below so i can modify the text but

<input type="text" [(ngModel)]="group.formGroupName" class="editable" />

But this is not working

This is my Ts.

    formData: Form = {
        formGroupName: 'form',
          groups: [
            {
                formGroupName: 'personalDetails',
                fields: [
                {
                 formControlName: 'firstName',
                  type: 'Text',
                  required: false,
                  label:'FirstName',
                  locked: true
                }
               ]
              },
              {
                formGroupName: 'contactDetails',
                 fields: [
                  {
                    formControlName: 'address1',
                    type: 'Text',
                    required: false,
                    label:'Address 1',
                    locked: true
                  }
               ]
             }
            ]

enter image description here

Source: Angular Questions

Published
Categorized as angular, angular8, formarray Tagged , ,

Answers

Finally i got the solution.

<input type="text" [(ngModel)]="group.formGroupName" [value]="group.formGroupName" class="editable" />

Ryleigh Fadel MD

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq