How to get the content from this.modalRef


Topic: How to get the content from this.modalRef

myictsolutions pro premium asked 5 years ago

Expected behavior get value content from modalRef Actual behavior undefined value Resources (screenshots, code snippets etc.) when i do: console.log(this.modalRef) is show me the property content which contains data. when i do console.log(this.modalRef.content) is shows up as undefined.

help will be appreciated :)


Bartosz Termena staff answered 5 years ago

Dear @myictsolutions

You want to get content of the element (for ex. the text content)?

If so, you have to use reference like #modalContentBody in the template, and @ViewChild decorator.

Here is my example to do this:

<button
  type="button"
  mdbBtn
  color="primary"
  class="relative waves-light"
  (click)="basicModal.show()"
  mdbWavesEffect
>
  Launch demo modal
</button>

<div
  mdbModal
  #basicModal="mdbModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myBasicModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close pull-right"
          aria-label="Close"
          (click)="basicModal.hide()"
        >
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body" #modalContent >
        ...
      </div>
      <div class="modal-footer">
        <button
          type="button"
          mdbBtn
          color="secondary"
          class="waves-light"
          aria-label="Close"
          (click)="basicModal.hide()"
          mdbWavesEffect
        >
          Close
        </button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>

TS:

 @ViewChild('modalContentBody', { static: true }) modalContentBody: ElementRef;

  ngOnInit(): void {
    console.log(this.modalContentBody.nativeElement.textContent);
  }

Hope it helps!

Best Regards, Bartosz.


myictsolutions pro premium answered 5 years ago

Hi Bartosz,

this is not working for me i have 2 components. 1 where I call the component from and send data (content) to the form on the property this.modalRef. so what you can do in the frontend is just use {{content.property}} however in order to get validation working I need this content property in the ts script. so i can do set.option to content.propertyname. when i do console.log(this.modalref) on the seconde property where the data is been sent to I do get all the information. included content but when i do this.modalref.content it comes back as undefined.

kind regards,

Max


Bartosz Termena staff commented 5 years ago

Hi!

Could you show me your code?

Best, Bartosz.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.2.0
  • Device: Mac Book pro
  • Browser: chrome v67
  • OS: Mojave
  • Provided sample code: No
  • Provided link: No