I have an Edit Button on my component called SearchComponent. When the user clicks this button, it currently redirects them to another component named EditFormComponent using navigateByUrl('url-link'). However, I would like to enhance the user experience by keeping them on the SearchComponent page and instead opening a Modal component that contains the EditFormComponent.
To achieve this, I am utilizing Angular Material Design to create the Modal component. Despite successfully calling the EditFormComponent within the Modal, I encountered an issue where the Modal displays without loading any data from the SearchComponent. Additionally, the 'background' seems to load the EditFormComponent page separately, resulting in an empty Modal component. Here is a snippet of my code: SEARCH.COMPONENT.TS
export class DistributionFormComponent implements OnInit {
@Input() dataModal: DistributionSearchModalComponent;
ngOnInit() {
console.log('Data received from modal', this.dataModal);
}
editDistribution(id) {
this.router.navigateByUrl(`/registry/basic/distribution/edit/${id}`);
}
openModal(id) {
this.dialog.open(DistributionSearchModalComponent, {
width: '660px',
height: '760px',
data: {
id: id.id,
address: id.address,
service: id.service,
}
})
}
MODAL.COMPONENT.HTML
<div fxLayout="row wrap" fxLayout.lt-sm="column" class="pt-1 pr-1 pl-1">
<div fxFlex="95" fxLayoutAlign="start">
<h1 matDialogTitle>Edit</h1>
</div>
<div fxFlex="5" fxLayoutAlign="end">
</div>
</div>
<div fxLayout="row wrap" fxLayout.lt-sm="column" class="pt-1 pr-1 pl-1">
<op-distribution-form [dataModal]="dataForm"></op-distribution-form>
</div>
MODAL.COMPONENT.TS
export class DistributionSearchModalComponent implements OnInit {
dataForm = this.data;
providerForm: FormGroup;
distributionForm: FormGroup;
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<DistributionSearchModalComponent>,
public confirmService: AppConfirmService,
public fb: FormBuilder,
) { }
ngOnInit(): void {
console.log('MODAL DATA ', this.data);
}
FORM.COMPONENT.TS
export class DistributionFormComponent implements OnInit {
@Input() dataModal: DistributionSearchModalComponent;
objModal;
searchId;
constructor(
private dialog: MatDialog,
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
) {}
ngOnInit() {
this.buildItemForm();
this.distributionForm.controls.distribuicao.valueChanges.subscribe(value => {
this.itemsSubject$.next(value);
});
this.hasPermission = this.permissionsServices.hasPermission('distribution');
console.log('Data received from modal ', this.dataModal)
this.objModal = this.dataModal;
console.log('modal id ', this.objModal.id)
}