maximelafarie / ngx-smart-modal

Modal/Dialog component crafted for Angular (Ivy-compatible)
https://maximelafarie.com/ngx-smart-modal/
MIT License
325 stars 85 forks source link

Can I open another component inside modal window? #239

Closed senzacionale closed 4 years ago

senzacionale commented 4 years ago

I really like your smart modal. But I have one question.

I would like to open another component inside your modal.

Example:

<ngx-smart-modal #modalData
                   identifier="modalData"
                   customClass="nsm-dialog-animation-ltr">
    <h1>Hey I am chart modal</h1>
    <p>
    <div>
      <tradingview [symbol]="'XXX'"></tradingview>
    </div>
    <button class="button -dark"
            (click)="modalData.close()">Close</button>
  </ngx-smart-modal>

tradingview is my component.

But the problem is that is never called and executed.

LouisAugry commented 4 years ago

Hello, yes of course you can open a component inside a modal.

Like here => https://stackblitz.com/edit/angular-ws258v

You may have forgotten to import this component into your module 😄

senzacionale commented 4 years ago

No I import it. But the content is not shown. Can you provide whole example. And my component has another component call inside ...

LouisAugry commented 4 years ago

Look at https://stackblitz.com/edit/angular-ws258v

I updated it with your code

senzacionale commented 4 years ago

Thank you. Maybe is problem because I am not loading static but dynamic data in component. I need to reinitialize ngOnInit() method after modal is open and prepare data.

ngOnInit() is currently not executed after modal is open.

LouisAugry commented 4 years ago

Can you give me an exemple of your problem on stackblitz please ?

senzacionale commented 4 years ago

I will try to prepare it.

In the meanwhile. Can you test if in TradingViewComponent class ngOnInit will be executed after modal is open?

senzacionale commented 4 years ago

I just tested it and it is not

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

@Component({
  selector: 'tradingview',
  template: `
  <h1>I'm a component inside another component</h1>
  `,
  styles: [`h1 { background-color: red; }`]
})
export class TradingViewComponent implements OnInit, OnDestroy {

  ngOnInit() {
    alert('test')
  }

  ngOnDestroy() {    
  }

}
LouisAugry commented 4 years ago

It's because I import it on app.module, then he init on start of application. If you want to init the composant on modal open. Just add a ngIf condition on the component.
<tradingview *ngIf="modalData.visible"></tradingview>

khylias commented 4 years ago

@senzacionale Is there still a need to keep this issues open?

senzacionale commented 4 years ago

Hey. Sorry for delay. It is working very well. Thank you!