CODEWITHSUNDEEP
angularbootstrap-modaltwo-way-binding
luigitonno
luigitonno

Reputation: 1

Angular 10 Modal Data Binding Bootstrap

I have a question of understanding and maybe someone can help me. Angular always says that @Input() can go into the depth of the nested components and back out with @Output() events. Which I find a very good concept. So why is there a two-way-binding in my case.

Thanks for your help!

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: \['./app.component.scss'\]
})

export class AppComponent {

  public group: Group = {
    id: 1,
    name: 'Gruppe A',
    members: [
      {
        id: 1,
        firstName: 'Firstname A',
        lastName: 'Lastname A'
      },
      {
        id: 2,
        firstName: 'Firstname B',
        lastName: 'Lastname B'
      }
    ]
  };

  constructor(private ngbModal: NgbModal) {}

  public openModal(): void {
    const testModal = this.ngbModal.open(TestModalComponent);
    testModal.componentInstance.group = this.group;
    testModal.result.then((group) => {
      this.group = group;
    }).catch(() => {});
  }

}

`test-modal.component.ts`:

```typescript
@Component({
  selector: 'app-test-modal',
  templateUrl: './test-modal.component.html',
  styleUrls: ['./test-modal.component.scss']
})

export class TestModalComponent implements OnInit {

  @Input() group: Group;

  constructor(public ngbActiveModal: NgbActiveModal) {}

  public save() {
    this.ngbActiveModal.close(this.group);
  }

  public ngOnInit(): void {}

  ublic updateMember(member: Member): void {}
}

entry.component.ts:

@Input() member: Member;

@Output() updateMember: EventEmitter<Member> = new EventEmitter<Member>();

public memberForm = new FormGroup({
  firstName: new FormControl(null),
  lastName: new FormControl(null)
});

constructor() {}

public ngOnInit(): void {
  this.memberForm.patchValue({
    lastName: this.member.lastName,
    firstName: this.member.firstName
  });
}

public saveMember(): void {
  this.member.lastName = this.memberForm.getRawValue().lastName;
  this.member.firstName = this.memberForm.getRawValue().firstName;
}

entry.component.html

<form [formGroup]="memberForm">
  <div class="row mb-2">
    <div class="col-lg-5">
      <input
        class="form-control"
        formControlName="firstName"
        (ngModelChange)="saveMember()"
      />
    </div>
    <div class="col-lg-5">
      <input
        class="form-control"
        formControlName="lastName"
        (ngModelChange)="saveMember()"
      />
    </div>
    <div class="col-lg-2">
      <button class="btn btn-success">
        <i class="fas fa-save"></i>
      </button>
    </div>
  </div>
</form>

Upvotes: 0

Views: 1607

Answers (1)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

if you mean the entry.component.ts member and member update you can do like this

@Input() member: Member;

@Output() memberChange: EventEmitter<Member> = new EventEmitter<Member>();

Usage Example

<app-entry [(member)]="member"></app-entry>

In this case you can use just [(member)]="member".

Please note: in order to use banana box([()]) you need to have the input @Input() property and output @Output() propertyChange = new EventEmitter<Member>(); method.

Upvotes: 1

Related Questions