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 >
    <div >
      <label for="dest" >Name</label>
    </div>
    <div >
      <input
        id="dest"
        name="dest"
        type="text"
        
        style="min-width: 380px"
        maxlength="25"
        [(ngModel)]="dest"
      />
    </div>
  </div>

  <div >
    <div ></div>
    <div >
      <button
        type="submit"
        
        (click)="openConfirmModal()"
        style="background-color: #239CD3;"
        [disabled]="formulaire.form.invalid"
      >
        Confirm
      </button>
    </div>
  </div>
</form>

CHILD

toto-result-modal.component.html

<table  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']);   
    }); 
 
  }

 
  }

CodePudding user response：

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.

CodePudding user response：

Create a service with an Observable of dest. Feed data to it in the parent component and subscribe to it in the child component. You're already providing TotoService, you could put it in there.

dest$: EventEmitter<string> = new Eventemitter<string>();

dest$.emit(dest);

dest$.subscribe(_ => { ... });