Issue
I have a form, when I enter une value for example test
, I would like to retrieve the value in a modal, please.
1))
2))
Here is my error message
error TS2339: Property 'dest' does not exist on type 'TotoResultModalComponent'.
Can you help me to be able to display the value in the modal please?
PARENT
toto.component.ts
export class TotoComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject<void>();
private svm: string | null = null;
dest: string = '';
constructor(
private service: TotoService,
private router: Router,
private activatedRoute: ActivatedRoute,
private modalService: BsModalService,
private location: Location,
) { }
ngOnInit(): void {
this.svm = this.activatedRoute.snapshot.paramMap.get('svm');
if (!this.svm) {
return;
}
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
openConfirmModal(): void {
const modalRef = this.modalService.show(TotoResultModalComponent, {
...NOT_CLOSABLE_MODAL_OPTIONS,
class: 'modal-dialog-centered modal-lg',
ariaLabelledBy: 'modal-error-title',
initialState: {
},
providers: [
{ provide: TotoService}
]
});
}
}
toto.component.html
<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid">
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<label for="dest" class="form-label">Name</label>
</div>
<div class="col-4">
<input
id="dest"
name="dest"
type="text"
class="form-control"
style="min-width: 380px"
maxlength="25"
[(ngModel)]="dest"
/>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col"></div>
<div class="col text-start">
<button
type="submit"
class="btn btn-primary"
(click)="openConfirmModal()"
style="background-color: #239CD3;"
[disabled]="formulaire.form.invalid"
>
Confirm
</button>
</div>
</div>
</form>
CHILD
toto-result-modal.component.html
<table class="table table-hover table-striped spaceLeft" style="width: 700px">
<tbody>
<tr>
<th style="width: 60%">Name</th>
<td style="min-width: 100%">{{ dest}}</td>
</tr>
</tbody>
</table>
toto-result-modal.component.ts
export class TotoResultModalComponent implements OnInit {
private unsubscribe$ = new Subject<void>();
modalService: any;
@Output() closeModal = new EventEmitter<void>();
constructor(
public modal: BsModalRef,
private router: Router,
private location: Location,
private service: TotoService
) { }
ngOnInit(): void {
this.goBack();
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
goBack(): void {
this.modal.hide();
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
this.router.navigate(['/transfers/toto']);
});
}
}
Solution
You have a type error because TotoResultModalComponent
doesn't have a dest
property, but you call it in the html. Just add the property.
for showing the outside data inside the modal, you have to get the BsModalRef
and set the dest
property.
openConfirmModal(): void {
const modalRef = this.modalService.show(TotoResultModalComponent, {
...NOT_CLOSABLE_MODAL_OPTIONS,
class: 'modal-dialog-centered modal-lg',
ariaLabelledBy: 'modal-error-title',
initialState: {
},
providers: [
{ provide: TotoService}
]
});
modalRef.content.dest = this.dest; // add this
}
You can also just pass it in the initialState:
initialState: {dest: this.dest}
This 2nd section in the modal docs has a sample.
https://valor-software.com/ngx-bootstrap/#/components/modals#service-component
I don't have recent experience with valor software but it is similar to the other bootstrap component library in this case.
Answered By - onivek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.