title: How to get a value from a field in a modal?
body: <p>I have a form, when I enter une value for example <code>test</code>, I would like to retrieve the value in a modal, please.</p>
  <p>1))</p>
  <p><a href="https://i.stack.imgur.com/4haFu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4haFu.png" alt="enter image description here" /></a></p>
  <p>2))</p>
  <p><a href="https://i.stack.imgur.com/X9u91.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X9u91.png" alt="enter image description here" /></a></p>
  <p>Here is my error message</p>
  <pre><code>error TS2339: Property 'dest' does not exist on type 'TotoResultModalComponent'.
  </code></pre>
  <p>Can you help me to be able to display the value in the modal please?</p>
  <p><strong>PARENT</strong></p>
  <p>toto.component.ts</p>
  <pre><code>export class TotoComponent implements OnInit, OnDestroy {
  
    private unsubscribe$ = new Subject&lt;void&gt;();
  
    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}
          
          ]
        });
    
      }
  
  }
  </code></pre>
  <p>toto.component.html</p>
  <pre><code>&lt;form #formulaire=&quot;ngForm&quot; (ngSubmit)=&quot;formulaire.form.valid&quot;&gt;
    &lt;div class=&quot;row row-cols-3 pt-3&quot;&gt;
      &lt;div class=&quot;col text-end&quot;&gt;
        &lt;label for=&quot;dest&quot; class=&quot;form-label&quot;&gt;Name&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-4&quot;&gt;
        &lt;input
          id=&quot;dest&quot;
          name=&quot;dest&quot;
          type=&quot;text&quot;
          class=&quot;form-control&quot;
          style=&quot;min-width: 380px&quot;
          maxlength=&quot;25&quot;
          [(ngModel)]=&quot;dest&quot;
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;row row-cols-3 pt-3&quot;&gt;
      &lt;div class=&quot;col&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col text-start&quot;&gt;
        &lt;button
          type=&quot;submit&quot;
          class=&quot;btn btn-primary&quot;
          (click)=&quot;openConfirmModal()&quot;
          style=&quot;background-color: #239CD3;&quot;
          [disabled]=&quot;formulaire.form.invalid&quot;
        &gt;
          Confirm
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>CHILD</strong></p>
  <p>toto-result-modal.component.html</p>
  <pre><code>&lt;table class=&quot;table table-hover table-striped spaceLeft&quot; style=&quot;width: 700px&quot;&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;th style=&quot;width: 60%&quot;&gt;Name&lt;/th&gt;
        &lt;td style=&quot;min-width: 100%&quot;&gt;{{ dest}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>toto-result-modal.component.ts</p>
  <pre><code>export class TotoResultModalComponent implements OnInit {
  
  
    private unsubscribe$ = new Subject&lt;void&gt;();
    modalService: any;
  
  
    @Output() closeModal = new EventEmitter&lt;void&gt;();
  
  
    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(() =&gt; {
          this.router.navigate(['/transfers/toto']);   
      }); 
   
    }
  
   
    }
  </code></pre>