Out of date documentation for component based modal

[eddi0815]

Hallo,

I'd like to use the same confirmation dialog all in my app. So I want to create a component based modal like in the example area. But I think the example of the component based modal is a little bit out of date.

In the example the SuiModal want 3 Parameter, but in the code there are only two. Example: constructor(public modal:SuiModal<IConfirmModalContext, void, void>) Code: export class SuiModal<T, U> implements OnInit, AfterViewInit {...}

I tried this with constructor(public modal:SuiModal<IConfirmModalContext, void, void>) `, then I get "No provider for SuiModal!". After that I add SuiModal to providers. Then I get "No provider for Renderer2!".

What I am doing here wrong? I think the SuiModal were not created, so the imports from modal.ts were not imported. How I get this working?

Thanks, eddi0815

[Hughp135]

I realise it's been a while since you made this issue, but thought i would try and help anyway.

The 3 types in the are actually in the constructor of the ModalControls class (https://github.com/edcarroll/ng2-semantic-ui/blob/master/src/modules/modal/classes/modal-controls.ts). If your text editor has a function to 'jump to definition' you could find this by going to the type definition of SuiModal. I'm not sure exactly how this works as I'm not an expert in TS.

All you need to add to your app.module.ts is the modal content component (ConfirmModalComponent in the example), which you in both the declarations array and the entryComponents array (assuming you already have SuiModule in the imports).

I agree the documentation is kinda confusing as the example is split up into 3 different components and it's not clear what you need to import in each of the files. For example, it doesn't mention you need to import SuiModalService and inject it into the constructor of the component where you want to call this.modalService from (private modalService: SuiModalService)

[edcarroll]

Will have a look at the documentation to see what bits could be cleared up here. Any specific suggestions you had would be very helpful!

[Hughp135]

Thanks for the reply

In my opinion, it would be helpful if there was a minimal example of creating a modal without too much boilerplate.

Here's a very rough example of some minimal code to open and approve a modal (might be possible to reduce this even more), not sure if this code works but:

Modal component

import { Component } from '@angular/core';
import { SuiModal, ComponentModalConfig, ModalSize } from 'ng2-semantic-ui';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
})
export class ModalContent  {
  data: string = 'complete';

  constructor(public modal: SuiModal<void, void>) {}

  closeModal() {
    this.modal.approve(data);
  }
}

export class CreateModal extends ComponentModalConfig<void, void, void> {
  constructor() {
    super(ModalContent);
    this.size = ModalSize.Small;
  }
}

Parent component

import { Component } from '@angular/core';
import { SuiModalService } from 'ng2-semantic-ui/dist';
import { CreateModal } from './modal-content.component.ts';

@Component({
  selector: '...',
  templateUrl: '...',
})
export class ParentComponent {
  constructor(private modalService: SuiModalService) {}

  openModal() {
    this.modalService
      .open(new CreateModal())
      .onApprove((data) => {
        console.log(data);
      })
      .onDeny((data) => {
        console.log(data);
      });
  }
}

[Jnixon54]

I am having the exact same issues. I've set everything up like in the docs but I still get a StaticInjectorError for SuiModal. If I provide SuiModal directly in the providers array for the ConfirmModalComponent the Modal will function however it has no 'context' property and therefore no title or question property etc.

Any clues? Did Eddi0815 ever resolve this?

Here is the error message:

[bikash8gupta]

You need to check from where you are importing SuiModal. I did face the same issue but I found that I had imported like this - import {SuiModal} from 'ng2-semantic-ui/dist' which actually should be import {SuiModal} from 'ng2-semantic-ui' So removing 'dist' from import fixed the issue for me

[Jnixon54]

I think that may do it. I just used template modals for the time being. That's what I get for being lazy with auto imports. Thanks a lot!

[sclausen]

@Jnixon54 How did you managed to access the context?

[sclausen]

I got it working. I didnt had to pass SuiModal, but Modal to the constructor of the component.