Comments (18)
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:
from ngx-materialize.
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.
from ngx-materialize.
@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?
from ngx-materialize.
@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. :)
from ngx-materialize.
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>
from ngx-materialize.
Also found that in Augury a trace shows that it is the default options, not the ones I am trying to send in...
from ngx-materialize.
@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.
from ngx-materialize.
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!
from ngx-materialize.
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.
from ngx-materialize.
@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:
from ngx-materialize.
@ersurajnegi are you using angular 5 ?
from ngx-materialize.
@jfcere... yes using 5.0.0 version.
Is there any issues with his version?
from ngx-materialize.
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.
from ngx-materialize.
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 :-)
from ngx-materialize.
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.
from ngx-materialize.
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 = 1015modal-overlay
z-index = 1014
Reference: https://sherweb.github.io/ng2-materialize/modal (see MzModalService section)
from ngx-materialize.
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.
from ngx-materialize.
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.
from ngx-materialize.
Related Issues (20)
- How to make a fixed navbar ? HOT 3
- Ho to align material-icon and a text-input HOT 1
- Tooltip with max width HOT 1
- Components no implements (click)
- autocomplete not working for input if data is dynamically bind through webservice HOT 3
- MzToastService.show: Materialize is not defined HOT 2
- Autocomplete not working with chip input (does with regular input) HOT 1
- Dropdown click inisde elements closes HOT 1
- Errors after updating to Angular 7 HOT 2
- Pagination component.
- Sidenav - this.collapseButton.sideNav is not a function HOT 5
- "Falling" icon in float+flat button in a mz-navbar HOT 1
- Chip selected when scrolling (swiping) through chip autocomplete list.
- Add own picture in select option with data-icon?
- Date picker and Time picker issue in latest chrome browser HOT 15
- Date picker - How Modify default Language HOT 2
- Text area not expanding on large input size HOT 1
- Getting compilation error when import ngx-materialize. HOT 1
- pagination breaks after totalItems = 0 HOT 1
- @angular/core has no exported member 'Renderer' HOT 12
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-materialize.