Need help with passing variables between two child components
Parent Component:
deposit.component.html
<div>
<app-new-or-update-deposit [(isOpenedModal)]="isOpenedModal"></app-new-or-update-deposit>
</div>
Deposit Component TypeScript File:
...
export class DepositsComponent implements OnInit {
public isOpenedModal = false;
constructor() { }
ngOnInit() {}
openModal() {
this.isOpenedModal = true;
}
}
First Child Component:
new-or-update-deposit.component.html
<app-modal [(isOpenedModal)]="isOpenedModal">
<div body>
Body content
</div>
<div footer>
Footer content
</div>
</app-modal>
New or Update Deposit Component TypeScript File:
...
export class NewOrUpdateDepositComponent implements OnInit {
@Input() isOpenedModal: boolean;
@Output() isOpenedModalChange: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor() { }
ngOnInit() { }
}
Second Child Component:
modal.component.html
<div class="modal fade" [ngClass]="isOpenedModal ? 'show modal-block' : ''" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<ng-content></ng-content>
</div>
</div>
</div>
<div class="modal-backdrop fade show" *ngIf="isOpenedModal"></div>
Modal Component TypeScript File:
...
export class ModalComponent implements OnInit {
@Input() isOpenedModal: boolean;
@Output() isOpenedModalChange: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor() { }
ngOnInit() { }
close() {
this.isOpenedModalChange.emit(false)
}
}
https://i.sstatic.net/a9s8u.jpg
Solution Implemented:
In new-or-update-deposit.component.html
<app-modal [(isOpenedModal)]="isOpenedModal" (isOpenedModalChange)="onIsOpenedModalChange($event)">
<div body>
Body content
</div>
<div footer>
Footer content
</div>
</app-modal>
As isOpenedModalChange is an event, I can call a function using it.
In new-or-update-deposit.component.ts
...
export class NewOrUpdateDepositComponent implements OnInit {
@Input() isOpenedModal: boolean;
@Output() isOpenedModalChange: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor() { }
ngOnInit() { }
onIsOpenedModalChange(value) {
this.isOpenedModalChange.emit(value);
}
}