Not able to assign customizable options to modal

[ersurajnegi]

<mz-modal #bottomSheetModal [options]="modalOptions">

Test Header

TS file

public modalOptions: Materialize.ModalOptions = {
  dismissible: false, // Modal can be dismissed by clicking outside of the modal
  opacity: .5, // Opacity of modal background
  inDuration: 300, // Transition in duration
  outDuration: 200, // Transition out duration
  startingTop: '100%', // Starting top style attribute
  endingTop: '10%', // Ending top style attribute
  ready: (modal, trigger) => { // Callback for Modal open. Modal and trigger parameters available.
    alert('Ready');
    console.log(modal, trigger);
  },
  complete: () => { alert('Closed'); } // Callback for Modal close
};

[jfcere]

Hi @ersurajnegi,

Quickly your code snippet seems alright, can you be more specific about the problem or provide the error if there is any?

You can find the demo code here if it helps:

• html template
• component

[ersurajnegi]

Hi @jfcere,

I did the exact as the links you have provided but still it didn't work.
Actually what i need is user should not be able to the close modal on clicking outside.
so i was setting dismissible: false option but it didn't work.

[jfcere]

@ersurajnegi are you using MzModalService to inject the modal? Because in the demo it doesn't .. the modal HTML is added directly into the parent component.

I am asking because there is an issue with Materialize (closed 7 days ago) that state that they have an issue with dynamically added modals and the dismissible property: Dogfalo/materialize#4909

Unfortunatly if this is the case, beside using the modal HTML, there is not much we can do but wait for a new release of Materialize with the related fix.

Update
Although it has been flagged as an issue on Materialize, I tried to inject a modal using MzModalService with the modal options and dismissible: false ... I was surprised to see that it works.

So it's kind of hard to tell whats going wrong without more information. Do you have a repository we can access to help you?

[ersurajnegi]

@jfcere .... i am not using the modal service but what i am doing this.. my modal template is in child component and when i pass data to that child component then i am initializing modal in that child component. modal is getting opened but the options are not being set for that modal.

Here is the link for the Child Component:
https://github.com/ersurajnegi/to-do-app/blob/master/src/app/components/add-edit/add-edit.component.ts

Thanks for helping. :)

[detchison]

I am also having this issue, i included the exact modalOptions from the example, and the exact modal from the example, and it seems that the modal options are not working, as the dissmissable is not working and neither are the callbacks. Is there an import we must have in the component?

import { Component, OnInit } from '@angular/core';
import { Therapist } from '../baseClasses/therapist'
import { TherapistService } from '../services/therapist.service';
import { Observable } from 'rxjs/Observable';
import { MaterializeModule } from 'ng2-materialize';

@Component({
  selector: 'app-view-therapists',
  templateUrl: './view-therapists.component.html',
  styleUrls: ['./view-therapists.component.css']
})
export class ViewTherapistsComponent implements OnInit {

  public therapists: Therapist[];
  public loading: boolean;
  public error: Error = new Error();

public modalOptions: Materialize.ModalOptions = {
    dismissible: false, // Modal can be dismissed by clicking outside of the modal
    opacity: .5, // Opacity of modal background
    inDuration: 300, // Transition in duration
    outDuration: 200, // Transition out duration
    startingTop: '100%', // Starting top style attribute
    endingTop: '10%', // Ending top style attribute
    ready: (modal, trigger) => { // Callback for Modal open. Modal and trigger parameters available.
      alert('Ready');
      console.log(modal, trigger);
    },
    complete: () => alert('Closed'), // Callback for Modal close
  };

  constructor(private therapistService: TherapistService) { }

  ngOnInit() {
    // Call getTherapists onInit in order to populate the therapist list at the beginning.
    this.getTherapists();
  }

  // Method to get all the therapists in the system and populate the therapists array.
  public getTherapists(): void {
    this.loading = true
    this.therapistService.getTherapists()
                    .subscribe(res => this.therapists = res, err => this.error = err);
  }

  // Method to edit a therapist.
  public editTherapist(): void {

  }

  // Method to delete a therapist.
  public deleteTherapist(): void {

  }


}

<div class="container">
  <div *ngIf="therapists != null">
    <h4 class="center-align">Therapists</h4>
    <div class="row">
      <div class="col s1 push-s11">
        <button mz-button (click)="addTherapistModal.open()">Modal</button>
      </div>
    </div>
    <div class="row">
      <div *ngFor="let therapist of therapists" class="col m4">
        <div class="card blue-grey darken-1 z-depth-2">
          <div class="card-content white-text">
            <span class="card-title">{{therapist.firstName}} {{therapist.lastName}}</span>
            <ul>
              <li><strong>Address:</strong> {{therapist.address1}}<br/>{{therapist.address2}}</li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<mz-modal #addTherapistModal [options]="modalOptions">
  <mz-modal-header>
    Modal Title
  </mz-modal-header>
  <mz-modal-content>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </mz-modal-content>
  <mz-modal-footer>
    <button mz-button [flat]="true" mz-modal-close>Disagree</button>
    <button mz-button [flat]="true" mz-modal-close>Agree</button>
  </mz-modal-footer>
</mz-modal>

[detchison]

Also found that in Augury a trace shows that it is the default options, not the ones I am trying to send in...

[jfcere]

@ersurajnegi thanks to your repository I've been able to identify the problem.

Materialize issue
This is related to the Materialize issue I mentioned earlier: Dogfalo/materialize#4909

Is there a fix?
This has been fixed 20 days ago as you can see the fix here: Dogfalo/materialize@3f72c75

How I've been able to confirm
Go ahead and comment the line 1013 in the node_modules\materialize-css\dist\js\materialize.js file ... you'll see the modal options work again:

open : function() {
  // methods.init.apply( this, arguments );
  $(this).trigger('openModal');
},

Now what?
Unfortunately the fix is not in the latest version 0.99.0 therefore we will have to wait for this to be released.

Is there a workaround?
Althought I did not test this with your repository, when I tried to use modal options in our demo application using the MzModalService options worked great so you could try to go down that path instead.

Note that using MzModalService allow you to inject a modal component extending MzBaseModal that gives you access to a close event emitter and you can add your own event emitter.

[jfcere]

Materialize released version 0.100.0 yesterday which include the fix for the modal options.

We are going to move foward to this version soon but we cannot give an exact date as we need to move the package from JQuery 2.4.x to 3.x.

If it wasn't for that breaking changes, we wouldn't have lock the Materialize package. We are sorry about the inconvenience and we'll keep you in touch when we'll have a better idea of when our new release will be available.

Thanks!

[jfcere]

Fyi we are working on updating the package to last Materialize/JQuery version which will resolve this issue. The update should be available for next release.

[ersurajnegi]

@jfcere ..i tried using opening a modal with ModalService. but not able to do that.

Getting below error in the browser console :

ERROR TypeError: Cannot read property 'length' of undefined
at MzInjectionService.getRootViewContainer (injection.service.js:62)
at MzInjectionService.getRootViewContainerNode (injection.service.js:86)
at MzInjectionService.appendComponent (injection.service.js:22)
at MzModalService.open (modal.service.js:19)
at GoalDetailsComponent.editGoal (goal-details.component.ts:46)
at Object.eval [as handleEvent] (GoalDetailsComponent.ngfactory.js:14)
at Object.handleEvent (core.js:13255)
at Object.handleEvent (core.js:13982)
at dispatchEvent (core.js:9704)
at eval (core.js:10318)

Please see attached file for modalComponent and service config:

[jfcere]

@ersurajnegi are you using angular 5 ?

[ersurajnegi]

@jfcere... yes using 5.0.0 version.
Is there any issues with his version?

[jfcere]

We haven't try it yet with Angular 5 but I know there is some issues.
I wouldn't suggest to do it right now as you may experiment unwanted behaviors.

For the modal issue, Angular seems to have changes their _rootComponents private property name on ApplicationRef which brakes the MzInjectionService in Angular 5.

[ersurajnegi]

Thanks @jfcere.
Yeah i tried debugging in Developer tools, got the same issue related to _rootComponents.
I'll try it with previous version of angular and let u know if i find any other issues.
Thanks :-)

[ersurajnegi]

I am able to open the modal by changing the angular version to 4.0.0.
But there is another issue the modal is opening behind the 'modal-overlay' div.
Any idea?
check the attached screen shot.

[jfcere]

You can go as far as angular 4.4.6 and you should'nt have any problem.

Hmm, quickly, I got no idea for the modal-overlay... have you changed any z-index somewhere in your application?

This is handled by Materialize where element with modal class should always have a value for z-index that is +1 from element with modal-overlay class.

For example...

• modal z-index = 1015
• modal-overlay z-index = 1014

Reference: https://sherweb.github.io/ng2-materialize/modal (see MzModalService section)

[ersurajnegi]

I haven't changed anything about z-index anywhere.
in my case z-indexes are as below :
modal z-index = 1002
modal-overlay z-index = 1003.

but still it is coming behind the modal-overlay.

i found the solution somehow:
i was assigning z-index= 0; to my app-container div. I don't know why this is causing an issue.
removing this, everything is working fine.

[jfcere]

That would have been my guess ... glad to know you found the problem.

Materialize seems pretty picky about z-index as they handle it pretty much everywhere. I would advise to restrict the use of z-index to the minimum to avoid issues.