Angular2 - MaterializeCSS: Modal dialogs don't open - javascript

I'm using Angular2 with materializecss.
At the moment I'm trying to create modal dialogs which open on button click. There is also an example in the docs https://www.npmjs.com/package/angular2-materialize.
I also use a materilize-select which works perfectly fine, so I guess the installation, imports etc. are correct.
The problem is, when I click the modal-trigger the router resolves the new Route "localhost:4200/#modal1" and I'm redirected to my startpage.
I also tried to replace href with data-target="modal1" but that didn't work either.
Can I somehow disable the Hash-Links for the Router? My other routes are without hashes.
Heres the example from npm docs. I copied this part 1:1.
<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Any help/hints are appreciated!
Edit: I changed the anchor to call a function on click
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>
which triggers
$('#modal1').openModal()
But now I get an error:
j.velocity is not a function
Edit 2:
Got it to open the modals by using jQuery instead of $. I still get the error and the Application is stuck after opening the modal.

I found a solution. Was quite frustrating to get there but here it is:
I reinstalled everything that was related to materialize + angular-cli, being angular2-materialize, materialize-css, jquery and hammerjs (which does not need to be installed manually).
Then I followed the instruction from npmjs and removed the part which imports material-css in app.module.ts.
import "materialize-css";
And after that everything works just fine. No need to alter the webpack settings in angular2-materialize package or anything like that. My versions are:
angular-cli 1.0.0-beta.16
angular2-materialize 5.2.1
materialize-css 0.97.7
jquery 2.2.4
I hope that I can save other people some frustrating hours I had with that.

I might be late for this, but you put those two attributes in modal trigger <a> rather than the modal <div> itself.
I also did exactly same mistake as OP, but after reading the angular2-materialize page carefully, I corrected my code as mentioned below.
Instead of this
<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
You have to put like:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal" materialize="leanModal" [materializeParams]="[{dismissible: false}]">
...
</div>
Three points to note here:
there are no special attributes in <a> i.e. the trigger
in place of materialize="leanModal", it is materialize="modal" in modal
didn't need to remove import "materialize-css"; in my case

You can try to use open\close programmatically by:
handle (click)="openModal()" on the href
$('#modal1').openModal(); inside the openModal() function
remove the href="#modal1"
having a closeModal() function with $('#modal1').closeModal();
see http://materializecss.com/modals.html when the doc says:
You can also open modals programatically, the below code will make your modal open on document ready:

Face same problem and above solutions not help me on this, so write a new answer
Just add $('.modal').modal(); in your components constructor.
import ... './stuff'
declare var $: any
#Component{...}
export class EditBlogComponent ...{
constructor(){
//Initialize modal here solve my
$('.modal').modal();
}
}

Related

Uikit Modal not destroying when route is changed (Angular)

What do I want?
I want to destroy Modals containing my Angular components to be closed and destroyed so it does produce side-effects when I am changing routes (For example using the browser back button).
Actual Results
When changing routes using my app's Navbar, either the Modal stays in the DOM and I am not able to scroll anything on the screen or The Modal simply does not close.
Artifacts such as which should be removed when we close the modal are still present.
I have tried using
UIkit.modal(myModalId).$destroy(true) to remove the modal from dom.
Jquery $(modalId).remove(); Modal removed from DOM but when we go back to the modal page, the Buttons are not triggering the modals.
My Code
Button that Opens Modal
<button uk-toggle="target: #myModalId">Open Modal</button>
Modal template
<div id="myModalId" class="uk-flex-top acc-modal" uk-modal="esc-close: false; bg-close: false; stacked: true; cls-page: 'acc-modal-page';">
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" style="width: 431.6px !important; ">
<button class="uk-modal-close-default uk-close-large" type="button" id="close-event" uk-close></button>
<h2 class="uk-modal-title">
Modal Title</h2>
<My-Child-Component (newItemEvent)="updateDataAfterChild($event)" #MyChildComponent></My-Child-Component>
</div>
</div>
Hide and Destroy modal when route component destroys.
destroyModal(modalId: string){
const modal = uikit.modal(modalId);
modal.hide();
modal.$destroy(true);
}
ngOnDestroy(){
try{
this.destroyModal('#'+myModalId);
}catch(err){
console.log(err);
}
}
Use routerLink and <router-outlet></router-outlet>.
You can do something like this.
<button mat-flat-button color="primary" routerLink="/login">Login</button>
<button mat-flat-button color="primary" routerLink="/signup">Signup</button>
<router-outlet></router-outlet>
Your Components will show in place of <router-outlet></router-outlet> and they will destroy previous component. [Source]
Thoughts:
I believe this way of routing is done because of the 'nature' of the Single Page Applications.

materializecss carousel slider modal

I have some problems integrating my materialize carousel-slider in a modal. I can't find the issue and I cant't find a possible solution through google or the materializecss website. So here is my question:
I created a gallery where you click on a image you open a modal with a integrated fullWidth-slider. Opening the modal works fine but I can't see my images inside the modal at all. Only if i resize the browser the images appears.
I'm working with angular5 and I use materializecss for my page design.
(I know there exits a #angular/material and ng2-materialize npm package that are much more better approach, but I just began developing with angular5 and so I thought learn just one new framework (angular5) and use for all other things the frameworks you already know (materializecss))
First I thought it is a problem with my angular5 app, so I tried to create a modal with a carouse-slider inside in the native way (means without angular5). As you can see in my JSFiddel (https://jsfiddle.net/davetwog/vfkbzu5m/) I face the same problem.
<button data-target="img-modal" class="btn modal-trigger" onClick="$('.carousel').carousel('set', 2);">Modal</button>
<div id="img-modal" class="modal">
<div class="modal-content">
<div class="carousel carousel-slider center">
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00290.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00383.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00445.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00448.jpg"></a>
<a class="carousel-item responsive-img"><img src="http://www.freeimageslive.com/galleries/objects/general/pics/objects00453.jpg"></a>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.modal').modal();
$('.carousel').carousel({
fullWidth: true
});
});
</script>
Anyone has a clue what I'm doing wrong? Or is this a known issue in the materializecss framework?
Updated JSFiddel
The height of the carousel was getting calculated as 0px because the modal was hidden. Thus the carousel had zero height.
I forked your example and updated the JS to use the Materialize init functions. When initializing the modal, I used the onOpenEnd option to specify a function that will initialize the carousel once the modal is opened resulting in a carousel that has height.
$(document).ready(function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, {
'onOpenEnd': initCarouselModal
});
function initCarouselModal() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {'fullWidth': true});
instances[0].set(2);
}
});
Hope that is helpful.
Another solution with Jquery 3.3.1 and Materialize 1.0.0 :
$('.modal').modal({
'onOpenEnd': initCarousel
});
function initCarousel() {
$('.carousel').carousel()
}

AngularJS - ngShow/ngSwitch/ngIf - Two elements flicker

So I have a two elements that are rendered inside an ng-repeat, when I click a button that does a toggle, for a brief second both elements get shown.
I have tried various things, ngIf, ngShow, ngSwitch and ngCloak and nothing seems to work.
Here is a code sample:
<div data-ng-repeat="item in view.myModel.items">
<div class="row">
<a ng-hide="item.link" class="btn ng-cloak"
ng-click="view.getLink($index)">Get Link</a>
<a ng-show="item.link" class="btn ng-cloak"
data-ng-href="{{item.link}}" download>Download</a>
</div>
</div>
So here is the problem, on load I only see the 'Get Link' button which is fine.
As soon as I click it, it makes a http call and sets the 'items.link' value, which is where the problem happens. At that moment both buttons are shown together.
Then correctly just the download button shows.
Here is the http call if your interested:
/**
* Get a link
*/
function getLink(idx) {
Linker
.getLink(idx)
.then(onGotLink);
function onGotLink(link) {
myModel.items[idx].link = link.url;
}
}
Any ideas?
So credit to user1620220 who pointed it out. The issue is ng-animate is running that is causing the ng-hide-animate to trigger causing that slight flicker.
You can turn off ng-animate, or use CSS to turn of 'transition' if you only want to partially disable it is.

JS - How to make Boxes collapsable in AdminLTE ( is using Bootstrap) when Content dynamical loaded

I'm using the AdminLTE Skin from https://almsaeedstudio.com/
I want to load the page content dynamically when clicking on the menu on the left side. I made this via jQuery:
<li><i class="fa fa-circle-o"></i>Test</li>
But when in Test.php is a collapsable box like this:
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-medkit"></i>
<h3 class="box-title">Test Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">TestContent</div>
</div>
The box is not collapsable when I click on the button nothing happens.
When I don't load the Content dynamically the button is usable. What is the matter here?
Thanks for your help.
I'm facing the same situation.
When I was looking for a workaround I've managed to discover what seems to be the real problem.
If you take a good look at app.js you'll see that there are many activate methods that scan the page to find out if a component is been used and then transforms or injects the behavior for the component.
That seems to be the case to boxes (Collapsable and closeable ones at least).
If you reload the script ($.getScript(app.js)) the box will work, but unfortunately other components will stop working (sidebar and control-sidebar).
If you want just the boxes to work inside de content-wrapper, one way is to call:
$.AdminLTE.boxWidget.activate();
You can do this on the $(document).ready() function of your content.
I'm still finding a better way to do this, but as far as boxes go, this should do the work.
Regards,
Jonatan Neves
I ran into the same issue, and ended up changing app.js so that the box widget listeners are on the document instead of the actual elements found when activate() is called. This guarantees dynamically added elements will be found:
$.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
activate: function () {
var _this = this;
//Listen for collapse event triggers
$(document).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(document).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
},
//...
}

Can the Zurb plugin “twentytwenty” be run in a Foundation 4 Reveal Modal?

Is it possible to run a Zurb TwentyTwenty (before and after slider view) plugin inside a Foundation Reveal Modal? I can get the modal to fire and the Header is shown, but not the plugin. The plugin does work on the page in a standard column and I even tried commenting it out to see if that was it. Here is the code I set for the modal:
<!-- Modal Box -->
<div id="myModal2" class="reveal-modal">
<h3><font color="red">See the difference we can make</h3></font></hr>
<div class="twentytwenty-container">
<img src="img/rjh_before.jpg" />
<img src="img/rjh_after.jpg" />
</div>
<a class="close-reveal-modal">×</a>
</div>
<!-- Modal Box end -->
And here is the trigger link:
Modal Version of the 20/20 slider
This is the first project I have done with Foundation and though I am learning fast, this one has me stumped. Any help would be greatly appreciated!
I found the answer myself; it's a bug in Reveal. Found on GitHub here:
Squashed picture when using Orbit in a Reveal - Issue #2809
Added this code before the script for reveal:
var resize_window = function(e) {
$(window).trigger('resize');
}
$(document).foundation('reveal', {'opened' : resize_window});
<!-- Not used in my case, but additionally for running Orbit -->
$(document).foundation('orbit')
Works a treat!

Categories