Calling modal in component from another component

Topic: Calling modal in component from another component

ducksuite pro asked 6 years ago

Hi, We are trying to open a modal in a component(navbar) from within another component(Inbox) When clicking link in navbar (click)="inbox.show() inbox modal in Inbox component should show. Instead we get TypeError: "_co.inbox is undefined"

Add comment

rudra prakash free answered 2 years ago

0 0 Best answer

i have to show a component dashboard data as table in another component but when i click on edit button of any element of that table the first component has to open as popup with the data as it have during creation angular

Add comment

hudjoubert free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

My problem is... I can not see modal on screen. Any suggest?

mimimii

      <span aria-hidden="true">×</span>
    </button>
    <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </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>

Only show "mimimi" string

Arkadiusz Idzikowski staff commented 4 years ago

The solution from this thread may be outdated, it is now possible to create dynamic modal with ModalService. Did you follow the instructions from 'Dynamic modal' section?

https://mdbootstrap.com/docs/angular/modals/basic/#dynamic

In case of any further problems please create new thread and provide more details (full html/ts code that you use and module configuration).

Johnny Moran free commented 4 years ago

But I can only use the MDBModalService from ng-uikit-pro-standard, correct? Therefore I'll have to pay to go pro, so its a clever way for you to get paid right

Arkadiusz Idzikowski staff commented 4 years ago

Dynamic modal is a free component and you can import the ModalService from 'angular-bootstrap-md' package as well. We will add this info to the documentation to avoid confusion.

Lucas Gomez free commented 4 years ago

I recreated that solution but I got this:

TypeError: Cannot read property 'show' of undefined at ModalService.showModalModificarEmpresa (modals.service.ts:18) at ModalModifyEmpresaComponent.showModal (modal-modify-empresa.component.ts:21) at ModalModifyEmpresaComponent_Template_button_click_2_listener (modal-modify-empresa.component.html:3) at

Arkadiusz Idzikowski staff commented 4 years ago

@Lucas Gomez
Which version of MDB Angular do you use? The workaround from this thread should no longer be needed because we added dynamic modals implementation to the library. Please take a look at the documentation: https://mdbootstrap.com/docs/angular/modals/basic/#dynamic

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear Sarah,

Please use the dynamic modal solution from our documentation. There are described everything which you need to call modals from service.

Best Regards,

Damian

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

5 0 Best answer

Dear worksonline,

You need to use service to communicate between components. I prepared an example for you:

app.component.html:
<div>
<pre><mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

<logo><aclass="navbar-brand"href="#">Navbar</a></logo>

<links>

<ulclass="navbar-nav mr-auto">

<liclass="nav-item">

<a (click)="openModal()"class="nav-link waves-light"mdbWavesEffect>Inbox show</a>

</li>

</ul>

<formclass="form-inline waves-light"mdbWavesEffect>

<divclass="md-form mt-0">

<inputclass="form-control mr-sm-2"type="text"placeholder="Search">

</div>

</form>

</links>

</mdb-navbar>

<app-inbox></app-inbox></pre>
</div>
app.components.ts:
<div>
<pre>import { Component, OnInit } from '@angular/core';

import { ModalService } from './modal.service';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

constructor(privatemodalService:ModalService) {}

openModal() {

this.modalService.showModal();

}

ngOnInit() {

}

}</pre>
</div>
inbox.component.ts:
<div>
<pre>import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

import { ModalDirective } from 'ng-uikit-pro-standard';

import { ModalService } from '../modal.service';

@Component({

selector:'app-inbox',

templateUrl:'./inbox.component.html',

styleUrls: ['./inbox.component.scss']

})

export class InboxComponent implements OnInit {

@ViewChild('basicModal') basicModal: ModalDirective;

constructor(privatemodalService:ModalService) { }

ngOnInit() {

this.modalService.setModal(this.basicModal);

}

}</pre>
</div>
modal.service.ts
<div>
<div>
<pre>import { Injectable } from '@angular/core';

import { ModalDirective } from 'ng-uikit-pro-standard';

@Injectable({

providedIn:'root'

})

export class ModalService {

yourModal:ModalDirective;

constructor() { }

setModal(modal:ModalDirective) {

this.yourModal=modal;

}

showModal() {

this.yourModal.show();

}

}</pre>
</div>
</div>

Best,

Arek

Please insert min. 20 characters.

Dear worksonline, You need to use service to communicate between components. I prepared an example for you: app.component.html:

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">

<!-- Navbar brand -->

<logo><aclass="navbar-brand"href="#">Navbar</a></logo>

<!-- Collapsible content -->

<links>

<!-- Links -->

<ulclass="navbar-nav mr-auto">

<liclass="nav-item">

<a (click)="openModal()"class="nav-link waves-light"mdbWavesEffect>Inbox show</a>

</li>

</ul>

<!-- Links -->

<!-- Search form -->

<formclass="form-inline waves-light"mdbWavesEffect>

<divclass="md-form mt-0">

<inputclass="form-control mr-sm-2"type="text"placeholder="Search">

</div>

</form>

</links>

<!-- Collapsible content -->

</mdb-navbar>

<!--/.Navbar-->

<app-inbox></app-inbox>

app.components.ts:

import { Component, OnInit } from '@angular/core';

import { ModalService } from './modal.service';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

constructor(privatemodalService:ModalService) {}

openModal() {

this.modalService.showModal();

}

ngOnInit() {

}

}

inbox.component.ts:

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

import { ModalDirective } from 'ng-uikit-pro-standard';

import { ModalService } from '../modal.service';

@Component({

selector:'app-inbox',

templateUrl:'./inbox.component.html',

styleUrls: ['./inbox.component.scss']

})

export class InboxComponent implements OnInit {

@ViewChild('basicModal') basicModal: ModalDirective;

constructor(privatemodalService:ModalService) { }

ngOnInit() {

this.modalService.setModal(this.basicModal);

}

}

modal.service.ts

import { Injectable } from '@angular/core';

import { ModalDirective } from 'ng-uikit-pro-standard';

@Injectable({

providedIn:'root'

})

export class ModalService {

yourModal:ModalDirective;

constructor() { }

setModal(modal:ModalDirective) {

this.yourModal=modal;

}

showModal() {

this.yourModal.show();

}

}

Best, Arek

ceyon67 pro commented 6 years ago

is it possible to call multiple modals with this scenario ? I tried to call a another modal from a different component but it just calls the the first modal.

newtongamajr pro commented 6 years ago

Using this same approach, how can I create an array of modals. Because sometimes, we need to have many modals inside the same component. I've tried to create an array of 'ModalDirective' but didn't work at all.

Sarah De Cock free commented 5 years ago

Hi!

I want to do the same thing as him but I get the error: ERROR TypeError: Cannot read property 'show' of undefined at ModalService.push../src/app/modal.service.ts.ModalService.showModal

Can you please help me to solve it? I think i understand now how you can communicate between 2 components but I think that there is maybe a problem with my modal html. Do I need to define it as a modal somewhere?

The thing is: i have a component login-form (that's my modal). And I want it to open when i click on a link in an other component and when i click on an item from navbar.

Thank you in advance!

Please insert min. 15 characters.

Stid Acero free commented 5 years ago

I have the same problem and I have already done everything it says

Arkadiusz Idzikowski staff commented 5 years ago

The solution from my answer is outdated, please take a look at dynamic modal documentation. This modal can be opened from any component: https://mdbootstrap.com/docs/angular/modals/basic/#dynamic

hudjoubert free commented 4 years ago

I tried to do that tutorials says and dind't work. It call my modal component but the component isn't show.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ducksuite

Pro User 20Support score
4Questions 2Answers 0Snippets