sherweb/ngx-materialize

Angular wrap around Materialize library

ngx-materialize's Issues

mz-checkbox-container and mz-radio-button-container

Hi,

<mz-checkbox-container class="col m3" *ngFor="let option of options"> <input mz-checkbox [label]="option.name" type="checkbox" id="{{ option.id }}"> </mz-checkbox-container>

With that, you can't select checkbox.
I want to do a plunker, but I don't know how include ngx-materialize... Sorry.

Bug in Sidenav Collapsible Header in Angular 4

in line 4 of template of MzSidenavCollapsibleHeaderComponent are used [innerHTML] property and it generate warning in angular 4

It is also no longer possible to use the click event on this component

<mz-sidenav-collapsible-header (click)="onClick($event)">
   <i mz-icon-mdi [icon]="'menu-right'" class="caret"></i>Collapsible
</mz-sidenav-collapsible-header>

In the previous version these problems did not exist
Does anyone have an opinion on this? Thank you very much in advance

Not able to assign customizable options to modal

<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
};

How can i contribute to the project? I have some errors.

Hi,

I want contribute to the project, but when clone the repo and I make "ng build", the compiler throw errors.
I tried to fork the project, with the same results.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/card/card.component.ts (31,31): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/card/card.component.ts (41,35): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/checkbox/checkbox.directive.ts (16,20): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/checkbox/checkbox.directive.ts (17,29): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/checkbox/checkbox.directive.ts (18,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/checkbox/checkbox.directive.ts (38,28): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/checkbox/checkbox.directive.ts (39,37): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/checkbox/checkbox.directive.ts (49,12): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/collapsible/collapsible.component.ts (36,20): Cannot find namespace 'Materialize'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/collapsible/collapsible.component.ts (43,56): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/collection/collection.component.ts (9,22): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/collection/collection.component.ts (10,28): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/collection/collection.component.ts (23,30): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/collection/collection.component.ts (24,36): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/dropdown/dropdown.component.ts (28,26): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/dropdown/dropdown.component.ts (45,34): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/dropdown/dropdown.component.ts (70,20): Cannot find namespace 'Materialize'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/input/input.directive.ts (27,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/input/input.directive.ts (28,26): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/input/input.directive.ts (30,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/input/input.directive.ts (66,25): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/input/input.directive.ts (67,34): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/input/input.directive.ts (83,12): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/modal/modal.component.ts (25,21): Cannot find namespace 'Materialize'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/modal/modal.component.ts (29,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/modal/modal.component.ts (46,25): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/parallax/parallax.component.ts (24,39): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/radio-button/radio-button.directive.ts (16,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/radio-button/radio-button.directive.ts (17,26): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/radio-button/radio-button.directive.ts (18,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/radio-button/radio-button.directive.ts (38,25): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/radio-button/radio-button.directive.ts (39,34): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/radio-button/radio-button.directive.ts (49,12): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (32,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (33,18): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (34,27): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (35,21): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (79,26): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (80,35): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (106,7): Type '{}[]' is not assignable to type 'Element[]'.
  Type '{}' is not assignable to type 'Element'.
    Property 'classList' is missing in type '{}'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (139,12): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (218,26): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (220,23): Cannot find name 'JQueryEventObject'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (225,11): Type '{}[]' is not assignable to type 'Element[]'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (231,45): Property 'textContent' does not exist on type '{}'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/select/select.directive.ts (234,21): Type '{}[]' is not assignable to type 'Element[]'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (41,5): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (51,28): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (62,5): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (71,5): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (78,5): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (81,72): Cannot find name 'JQueryEventObject'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (82,15): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav.component.ts (83,13): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav-collapsible/sidenav-collapsible.component.ts (37,20): Cannot find namespace 'Materialize'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/sidenav/sidenav-collapsible/sidenav-collapsible.component.ts (44,56): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/textarea/textarea.directive.ts (17,20): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/textarea/textarea.directive.ts (18,29): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/textarea/textarea.directive.ts (19,17): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/textarea/textarea.directive.ts (40,28): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/textarea/textarea.directive.ts (41,37): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/textarea/textarea.directive.ts (56,12): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/toast/services/toast.service.ts (7,5): Cannot find name 'Materialize'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/tooltip/tooltip.directive.ts (12,18): Cannot find name 'JQuery'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/tooltip/tooltip.directive.ts (38,26): Cannot find name '$'.

ERROR in /home/bwired/Apps/ng2-materialize/src/app/tooltip/tooltip.directive.ts (42,27): Cannot find namespace 'Materialize'.

ERROR in /home/bwired/Apps/ng2-materialize/src/typings.d.ts (10,15): Cannot find name 'JQuery'.

How can I fix or avoid them?

Thank you!

Floating label placeholder does not correctly reset on FormGroup.reset()

This is a minor annoyance, but when calling the FormGroup.reset() function, the floating label for the input does not reset to its original position. It's easy to see on the live website.

To reproduce:

1. Go to forms validation on the demo website.
2. Fill out the form normally.
3. Click the Clear button to clear the form.
4. Scroll up. The labels for any field previously filled out will still be floating above, rather than on, the input.

Clicking in and out of inputs works as expected. If you click on a field, enter some data, then clear that data and blur the field, the label returns to the correct position.

ngFor MzCollectionItemComponent Issue

Hi ,
I am having some issue with the mz-collection .
when I first load the application with the schedules array set the dom is rendered with no issue, but when I add a new item to the schedules array, I get this error .
Can you please help.
Thanks.

--ERROR--
ERROR TypeError: Cannot read property 'insertBefore' of null
at MzCollectionItemComponent.webpackJsonp.../../../../ng2-materialize/dist/shared/remove-component-host/remove-component-host.js.MzRemoveComponentHost.ngAfterViewInit (remove-component-host.js:11)
at callProviderLifecycles (core.es5.js:11269)
at callElementProvidersLifecycles (core.es5.js:11244)
at callLifecycleHooksChildrenFirst (core.es5.js:11228)
at checkAndUpdateView (core.es5.js:12325)
at callViewAction (core.es5.js:12680)
at execEmbeddedViewsAction (core.es5.js:12638)
at checkAndUpdateView (core.es5.js:12318)
at callViewAction (core.es5.js:12680)
at execEmbeddedViewsAction (core.es5.js:12638)

----SAMPLE CODE USED----

<div *ngIf="schedules"> <mz-collection> <mz-collection-item *ngFor="let app of schedules;"> <div class="row" style="margin-bottom:0px"> <div class="col s4 m4" style="border-right: 2px #337ab7 solid;"> <div> {{app.startDate | date: 'HH:mm'}} - {{app.endDate | date: 'HH:mm'}} </div> </div> <div class="col s8 m8"> <div> {{app.clientName}} </div> </div> </div> </mz-collection-item> </mz-collection> </div>

Any plans to integrate the Pagination component?

http://materializecss.com/pagination.html
Hope this helps: https://github.com/pleerock/ngx-paginator

[Angular 4] Sidenav requires page refresh to start working

I am using SideNav in my Angular 4 code which looks pretty much like SIDE NAV DEMO you have on http://materializecss.com/side-nav.html but the menu shows on the header only after login like this:

<li *ngIf="authService.isAuthenticated()"><a data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a></li>

However that causes the menu not to open after login unless you refresh the page.

Any suggestions or is this problem on materialize side? I don't want to use href as a workaround.

Events become unbound when using dropdown with *ngIf

I'm using *ngIf attribute for the dropdown menu and his trigger button. when the expression toggles between true and false the events that were bound to the nested elements inside the dropdown become unbound.

example:

example.component.html

<button mz-button id="btn-dropdown" *ngIf="x === 1">Open</button>

<button mz-button (click)="x = x * -1">Toggle</button>

<mz-dropdown [id]="'dropdown'" [dropdownButtonId]="'btn-dropdown'" [constrainWidth]="false" *ngIf="x === 1">
  <mz-dropdown-item>
    <a (mouseenter)="logMessage('mouseenter')">Button1</a>
  </mz-dropdown-item>
  <mz-dropdown-item>
    <a (mouseleave)="logMessage('mouseleave')">Button1</a>
  </mz-dropdown-item>
  <mz-dropdown-item >
    <a (click)="logMessage('click')">Button3</a>
  </mz-dropdown-item>
</mz-dropdown>

example.component.ts

@Component({
  ...
})
export class ExampleComponent {
  public x = 1;

  public logMessage(msg: string) {
    console.log(msg);
  }
}

Placeholder at <mz-select-container> doesn't work

original:
[placeholder]="Placeholder"

has to be replaced with:
[placeholder]="'Placeholder'" (with single quotes inside the double quotes)

ModalService: How can I pass data into a modal component

How can I inject state into the modal component? Maybe I'm overlooking something obvious here, but I can't seem to find a way to do this using the modal service.

How to remove wave effect from dropdown button?

Hi team,

How to remove wave effect from dropdown button? I wanted to use anchor tag instead of dropdown button but it automatically add "wave-effect" classes?

regards
Harsh Kumar Lamba

checkboxes unusable within collapsible body

Checkboxes work within a materialize collapsible body but functionnality is lost within a ng2-materialize collapsible body.

Possible Contribution

I am considering contributing, as i wrote a wrapper for the Datepicker, however i noticed that you are using Renderer and invokeElementFunction which have been deprecated. Your guide said to maintain the same style, but with this information its not wise to do so. What would you suggest? I have resorted to declaring a Jquery variable as it is the only other way to call one of these function such as .pickadate() in my case. The recommendations I have been reading have said to use the nativeelement to call this however the function doesnt seem to be accessible that way

ReactiveForms - validation not working

Hi,

When using reactive forms I add several validators to an input marked with mz-input, however validation doesn't seem to be reflected:
template:

<mz-input-container class="col m6 s12">
        <i mz-icon-mdi mz-input-prefix
           [icon]="'cloud'">
        </i>
        <input mz-input
               [label]="'Nr służbowy'"
               [dataError]="'Niepoprawna wartość'"
               [dataSuccess]="'Wartość poprawna'"
               id="employee-id-input"
               length="{{fieldLengths.employeeId}}"
               type="text"
               [validate]="true"
               formControlName="employeeId"
        >
      </mz-input-container>

component init:

this.form = this.fb.group({
      employeeId: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(6)]]
    })

When I type only 2 characters, it still shows the dataSuccess message instead of dataError. Is that supposed to work this way? If so, how can I use validators so that the invalid value is reflected in the UI?

Select doesn't work when inside a Collapsible

Hi there,
I'm with a problem similar to issue 105 (#105)

When I put Input elements inside a Collapsible, the Input is not rendered at all.
Select elements are rendered, but the functionality is gone (the options don't pop up).

Running a few tests I found out that even normal HTML elements with (click) do not trigger events from inside the Collapsible. Is this an expected behaviour?

Sidenav, unit test : Cannot read property 'classList' of undefined

Hello,

my project is under angular4 and i used angular-cli to run the test (ng test)

I used the mz-sidenav component on my code without change anything for the moment (https://sherweb.github.io/ng2-materialize/sidenav) and when
i tried to run unit test i had this error :

TypeError: Cannot read property 'classList' of undefined at EmulatedEncapsulationDomRenderer2.webpackJsonp../node_modules/@angular/platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.addClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:57837:70) at DebugRenderer2.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.DebugRenderer2.addClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:44310:23) at RendererAdapter.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.RendererAdapter.setElementClass (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41533:27) at MzSidenavComponent.webpackJsonp../node_modules/ng2-materialize/dist/sidenav/sidenav.component.js.MzSidenavComponent.initCollapseButton (http://localhost:9876/_karma_webpack_/vendor.bundle.js:69355:27) at MzSidenavComponent.webpackJsonp../node_modules/ng2-materialize/dist/sidenav/sidenav.component.js.MzSidenavComponent.ngAfterViewInit (http://localhost:9876/_karma_webpack_/vendor.bundle.js:69340:14) at callProviderLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:42156:18) at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/vendor.bundle.js:42131:13) at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/vendor.bundle.js:42115:17) at checkAndUpdateView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43133:5) at callViewAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43440:17) at execComponentViewsAction (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43386:13) at checkAndUpdateView (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43131:5) at callWithDebugContext (http://localhost:9876/_karma_webpack_/vendor.bundle.js:44113:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:9876/_karma_webpack_/vendor.bundle.js:43653:12) at ViewRef_.webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.ViewRef_.detectChanges (http://localhost:9876/_karma_webpack_/vendor.bundle.js:41223:63)

Get value from Modal?

I was wondering if you guys could help me get a value from a modal? I have been using Angular Material 2 but once I seen this project I started to switch my project to use this one instead. Still learning how to do things with this project that I had done with Angular Material 2.

Is there a way to not close dropdown when I click outside?

Programmatically opening the dropdown and will close programmatically. Is there a way to disable close on outside click?

@types/jquery fail my compilation

Hi all,

I'm not sure it's the good place for this ticket...
Today, I ran nom update and my compilation fail.
ERROR in /*****/node_modules/ng2-materialize/dist/textarea/textarea.directive.d.ts (21,27): Generic type 'JQuery<TElement, HTMLElement>' requires 2 type argument(s).

I found this: DefinitelyTyped/DefinitelyTyped#17239.
With this in my package.json "@types/jquery": "^2.0.47",, I fix the build process.

Maybe you can add it in your package.json?

ERROR TypeError: Cannot read property 'apply' of undefined

Hi,

I am trying to open a modal with a component but I have the following error:

LoginModalComponent.html:2 ERROR TypeError: Cannot read property 'apply' of undefined
    at RendererAdapter.invokeElementMethod (core.es5.js:10726)
    at MzModalComponent.initModal (modal.component.js:45)
    at MzModalComponent.ngAfterViewInit (modal.component.js:33)
    at callProviderLifecycles (core.es5.js:11398)
    at callElementProvidersLifecycles (core.es5.js:11373)
    at callLifecycleHooksChildrenFirst (core.es5.js:11357)
    at checkAndUpdateView (core.es5.js:12467)
    at callViewAction (core.es5.js:12824)
    at execComponentViewsAction (core.es5.js:12756)
    at checkAndUpdateView (core.es5.js:12465)
    at callWithDebugContext (core.es5.js:13679)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.es5.js:13219)
    at ViewRef_.detectChanges (core.es5.js:10385)
    at eval (core.es5.js:5016)
    at Array.forEach (<anonymous>)
    at ApplicationRef_.tick (core.es5.js:5016)
    at eval (core.es5.js:4888)
    at ZoneDelegate.invoke (zone.js:392)
    at Object.onInvoke (core.es5.js:4094)
    at ZoneDelegate.invoke (zone.js:391)
    at Zone.run (zone.js:142)
    at NgZone.run (core.es5.js:4025)
    at Object.next (core.es5.js:4888)
    at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3839)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.next (Subscriber.js:185)
    at Subscriber._next (Subscriber.js:125)
    at Subscriber.next (Subscriber.js:89)
    at EventEmitter.Subject.next (Subject.js:55)
    at EventEmitter.emit (core.es5.js:3825)
    at checkStable (core.es5.js:4059)
    at onLeave (core.es5.js:4138)
    at Object.onInvokeTask (core.es5.js:4088)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at ZoneTask.invokeTask [as invoke] (zone.js:499)
    at invokeTask (zone.js:1427)
    at XMLHttpRequest.globalZoneAwareCallback (zone.js:1445)

Here is the component:

@Component({
  selector: 'login-modal',
  template: `
<mz-modal>
  <mz-modal-header>
    <h3 class="modal-title" id="modal-title">Authentification requise</h3>
  </mz-modal-header>

  <mz-modal-content>
  </mz-modal-content>

  <mz-modal-footer>
    <button mz-button class="green" (click)="submit()">
      Login
    </button>

    <button mz-button mz-modal-close>
      Cancel
    </button>
  </mz-modal-footer>
</mz-modal>
  `
})
export class LoginModalComponent extends MzBaseModal {
  @ViewChild('loginForm') loginForm: LoginFormComponent;

  submit(): void {
    // TODO Alexis Lahouze 2017-08-31 Send result, close modal.
  }
}

And here is the way I open the modal:

let modal = this.mzModalService.open(LoginModalComponent);

Here are the versions of my dependencies:

$ yarn list @angular/core ng2-materialize materialize-css zone.js rxjs                                                                                         
yarn list v0.27.5                                                                                                                                                                                                                      
├─ @angular/[email protected]                                                                                                                                                                                                                 
├─ [email protected]                                                                                                                                                                                                              
├─ [email protected]                                                                                                                                                                                                               
├─ [email protected]                                                                                                                                                                                                                          
└─ [email protected]                                                                                                                                                                                                                      
Done in 0.89s.

I tried to downgrade zone.js to version 0.8.4 after reading this issue angular/angular-cli#6036 but got the same error.

Best regards,
Alexis.

stopPropagation=true doesn't work on programmatic dropDown

Version: 1.5.1
NG 4.1.0

mz-dropdown triggered programmatically. [stopPropagation]=true doesn't stop event propagation and closes the dropdown on inside click.

Expected behavior: dropdown should remain open

Was working fine in 1.3.2

How to close a modal programmatically from TS

Hi,
How would I close a modal component programmatically after clicking the save btn let's say.

<mz-modal-footer> <button #savebtn [disabled]="!newclient.form.valid" type="button" (click)="createNewAppointment(savebtn)" mz-button class="green btn waves-effect waves-light white-text ">{{'Save' | translate: lang}}</button> </mz-modal-footer>
without using mz-modal-close attribute

Select component validation problem

When change value of select component the css class don't change to ng-touched

Problems to pre-select options in mz-select

<mz-select-container class="col s6">
      <select id="select-group" multiple mz-select label="Groups" formControlName="groups" placeholder="Select">
          <option *ngFor="let option of availableGroups" [value]="option" [selected]="option.uuid == selectedGroup.uuid">{{ option.name }} </option>
     </select>
</mz-select-container>

availableGroups = [ 
    { "uuid": "ff8080815d09a25c015d09a360640000", "name": "Group 1" }, 
    { "uuid": "ff8080815d09a25c015d09ed20790002", "name": "Group 2" } 
] 

selectedGroup = { "uuid": "ff8080815d09a25c015d09ed20790002", "name": "Group 2" }

I'm trying to render a select inside a form using Angular FormBuilder. I can create a new group normally with POST, when I select something in the select, my formControl values are updated correctly.

The problem is that I've been trying to pre-select one (or more) options when I render the form using the attr "selected" without success. Is there any mistake in the code above or there is something missing in the implementation of the mz-select component?

Async options in select are not reflected

Ng for not working for select component

mz-sidenav fixed property doesn't update inline styles to make it appear fixed when variable

I am trying to have a sidenav that is fixed sometimes depending on certain conditions. To do this, I passed a boolean variable to mz-sidenav's [fixed] property. When a user interaction causes the variable to become true, I can see that the component does add a "fixed" class to the side-nav ul, however, it's inline style of "transform: translateX(-100%);" remains, causing the sidenav to still appear off-screen. If I remove the inline-style, switching back and forth from fixed to not fixed seems to work as expected. Can the sidenav component remove any inline transform styles when it switches to from not fixed to fixed on the fly?

mz-input label is not set active when used with [(ngModel)]

Hey,

I have a component with a [label] set and using it with [(ngModel)]. The data bound to this element is fetched from the server. When data is present, the label is not set to active - so the render looks like this:

Expecting this:

My element is declared like this:

<mz-input-container>
   <input mz-input [label]="'Case Name'" [validate]="true" [dataError]="'Case Name is required'" name="caseName" id="caseName" type="text" [(ngModel)]="case.name" [value]="case.name">
</mz-input-container>

Using NG 4.1.0 and ng2-materialize 1.3.2

Select control: Issue with Async options

Hey there.

I'm having difficulty with pre-selecting async options within the mz-select control. When generating options in the following way:

<option *ngFor="let language of _languages" [selected]="1==1" [value]="language.id">{{ language.title }}</option>

Only the last option is ever pre-selected (even with the selected property always set to true). I see on the demo page: https://sherweb.github.io/ng2-materialize/select there is an asynchronous select control with pre-populated options, how were you able to achieve this?

error no exported member 'Renderer2'

Hi,

I am having an error when I start npm now because of ng2-materialize. Here's the error I get:
WARNING in ./~/ng2-materialize/dist/collection/collection.component.js
33:12-21 "export 'Renderer2' was not found in '@angular/core'

ERROR in ....../node_modules/ng2-materialize/dist/collection/collection.component.d.ts (4,30): Module .../node_modules/@angular/core/index"' has no exported member 'Renderer2'.

How do I fix this?

Thank you!

Increase or decrease fontsize in the mz-navbar

Not sure whether this is an issue or not but the font-size in the navbar comes out to be very small. If I use the heading like h1, h2 to increase or decrease the font the text location is not centered and goes above.
How do we get the font size just like the ones you use in the navbar in the examples on the tutorial website.

Any plans to integrate the Tabs module?

Sidenav does not set 'active' on current route, does not support routerLinkActive

When you select a link in MaterializeCss's sidenav, the link is set to active. The ng2-materialize sidenav doesn't automatically set the class for a newly selected link and doesn't appear to expose any way for the developer to do so. The standard way to do that in angular is to set the class for the item with routerLinkActive="['className']".

Proposal: replace <li [class.active]="active"> with <li [routerLinkActive]="['active']"> in sidenav-link.component.html and add the import for angular/router to the app module.

mz-collapsible-item bug

When looping through an array then modifying the array, doesn't update the collection items.

Html:

<mz-card>
  <mz-card-content>
    <button mz-button (click)="changeValues();">Click me</button>
    <button mz-button (click)="changeValues2();">Click me</button>
    <button mz-button (click)="changeValues3();">Click me</button>
    <button mz-button (click)="changeValues4();">Click me</button>
    <mz-collapsible class="col s12" *ngIf="list.length > 0">
      <mz-collapsible-item *ngFor="let item of list">
        <mz-collapsible-item-header>
          {{item}}
        </mz-collapsible-item-header>

        <mz-collapsible-item-body>
          {{item}} body
        </mz-collapsible-item-body>
      </mz-collapsible-item>
    </mz-collapsible>
  </mz-card-content>
</mz-card>

TS:

list = ['Item1', 'Item2', 'Item3'];

constructor() {}

changeValues() {
  this.list = ['Item5', 'Item6']; // Just adds the values to the collapsible doesn't set it.
}

changeValues2() {
  this.list = ['Item7', 'Item8']; // Same as in changeValues()
}

changeValues3() {
  this.list = []; // Removes everything from the collapsible
}

changeValues4() {
  this.list = []; // Doesn't resets the collapsible items like in changeValues3()
  this.list = ['New item', 'New item2']; // Just adds these two to the collapsible
}

HTML structure for dropdown is incorrect

Hi team,

Please correct HTML structure for dropdown in documentation. Following is the path for the location:
https://sherweb.github.io/ng2-materialize/dropdown

Issue: Closing tag is incorrect. Instead of "", currently it is "".

thanks in advance.

regards
Harsh Kumar Lamba

Initial state of select validator not getting set

I'm binding a select via ngFor and the initial value is binding to the select but the initial validator state is not being set. In the screenshot you can see my other fields validate and show green on load but the select does not. I'm not sure what I'm missing. If I click on the state select after it loads then the validator changes to green just not on the initial load.

 this.clientToEdit = new FormGroup({
        firstName: new FormControl(this.editClient.firstName, [Validators.required, Validators.minLength(2), Validators.maxLength(50)]),
        middleName: new FormControl(this.editClient.middleName, [Validators.required]),
        lastName: new FormControl(this.editClient.lastName, [Validators.required, Validators.minLength(2), Validators.maxLength(50)]),
        address1: new FormControl(this.editClient.address1, [Validators.required, Validators.minLength(5), Validators.maxLength(100)]),
        address2: new FormControl(this.editClient.address2),
        city: new FormControl(this.editClient.city,[Validators.required, Validators.minLength(5), Validators.maxLength(100)]),
        state: new FormControl(this.editClient.state, [Validators.required]),
        zip: new FormControl(this.editClient.zip,[Validators.required, Validators.pattern(this.zipRegEx)]),
        birthDate: new FormControl(bDate, [Validators.required]),
        gender: new FormControl(this.editClient.gender, [Validators.required]),
        notes: new FormControl(this.editClient.notes)
      });

  <mz-select-container class="col s4">
                <select mz-select mz-validation required [errorMessageResource]="errorMessages.state" [label]="'State'" name="stateSelector" [placeholder]="'Select a State'" id="state" formControlName="state" >
                <option *ngFor="let state of states" [ngValue]="state.abbreviation">{{state.abbreviation}}</option>
                </select>
          </mz-select-container>     

Select default value

Having some trouble setting the default value of the dropdown select.
here is my sample code using angular 4.

<mz-select-container>
  <select id="options-select" required name="hour" mz-select [label]="'Hour'"
 [(ngModel)]="appointment.startHour">
    <option *ngFor="let hour of hours" [ngValue]="hour">{{hour}}</option>
  </select>
</mz-select-container>

mz-select with reset button

Hi.
Why is it that every time when the button is clicked and the value of "pfSelect.title" is changed to the default value. The select button won't change but the value will change. I tried to console.log the value and it changed.

tool-input.component.html

<mz-select-container class="col s12 m12 l12">
  <select mz-select id="pf-select" [(ngModel)]="pfSelect.title" [label]="'Pack Functionality'">
    <option *ngFor="let pfOption of pfOptions" [value]="pfOption.value" [disabled]="pfOption.disabled">{{pfOption.text}}</option>
  </select>
</mz-select-container>

<button mz-button class="white black-text" (click)="clear()" style="margin-top: 5px !important;">CLEAR</button>

tool-input.component.ts

pfOptions = [
  { value: "1", text: "-- Choose --", disabled: true },
  { value: "Protect Only", text: "Protect Only", disabled: false },
  { value: "Promote/Gifting", text: "Promote/Gifting", disabled: false }
];

pfSelect = {
  title: "1"
};

clear() {
  this.pfSelect.title = "1";
}

Install with quickstart of angualr

Please, I need a little tutorial for installing with angular quickstart

The console is throwing a error when i add Tab class

Hi.
I have a project with angular4, and when I add the class Tab the browser console throw the error:

zone.js:195 Uncaught TypeError: Cannot read property 'left' of undefined
    at calcRightPos (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1437:53)
    at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:1502:36)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at ZoneTask.invoke (zone.js:486)
    at timer (zone.js:1540)

The code

<div class="row">
    <div class="col s12">
        <ul class="tabs">
            <li *ngFor="let category of categories" class="tab"><a routerLink="/collection/{{category.se_name}}">{{category.name}}</a></li>
        </ul>
    </div>
</div>

My package.json

{
  "name": "calendar-club",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "mdi": "^1.9.33",
    "ng2-materialize": "^1.4.2",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.1.2",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Error when trying to bind Error Message Resource

I get the following error when trying to bind an error message resource on an input element:

Uncaught Error: Template parse errors:
Can't bind to 'errorMessageResource' since it isn't a known property of 'input'. (" <input mz-input mz-validation required [label]="'First Name'" [validate]="true" id="firstName" [ERROR ->]

<input mz-input mz-validation required [label]="'First Name'" [validate]="true" id="firstName" [errorMessageResource]="errorMessages.firstName" formControlName="firstName" type="text" placeholder="First Name"/>

  errorMessages = {
    firstName: {
      required: `A first name is required.`,
      minlength: `First name must be at least 2 characters.`,
      maxlength: `First name may be no more than 50 characters.`
    }
  }

Collapsible > mz-collapsible-item > active not working

Hello,

Setting a property active to true does not make a collapsable-item open. This issue is visible also in provided example under: https://sherweb.github.io/ng2-materialize/collapsible (Preselected Section)

Thanks for all your effort!

Error adding new item to collapsible

Hi,
when I try to modify the items collection inside a collapsible, it is reporting an error

ERROR TypeError: Cannot read property 'insertBefore' of null
at MzCollectionItemComponent.MzRemoveComponentHost.ngAfterViewInit (remove-component-host.js:11)
at callProviderLifecycles (core.es5.js:11161)
at callElementProvidersLifecycles (core.es5.js:11136)
at callLifecycleHooksChildrenFirst (core.es5.js:11120)
at checkAndUpdateView (core.es5.js:12152)
at callViewAction (core.es5.js:12507)
at execEmbeddedViewsAction (core.es5.js:12465)
at checkAndUpdateView (core.es5.js:12145)
at callViewAction (core.es5.js:12507)
at execEmbeddedViewsAction (core.es5.js:12465)

My html template is:

<mz-collapsible [mode]="'expandable'" >
  <mz-collapsible-item [active]="true" >
    <mz-collapsible-item-header>
      <i mz-icon-mdi [icon]="'filter-variant'"></i>Filters <span class="app-brand-text text-lighten-2">x</span>
      <i mz-icon-mdi [icon]="'chevron-down'" [class]="'app-clean-mg'"></i>
      <i mz-icon-mdi [icon]="'chevron-left'" [class]="'app-clean-mg'"></i>
    </mz-collapsible-item-header>
    <mz-collapsible-item-body>
      <mz-collection>
        <ng-container>
          <mz-collection-item *ngFor="let f of filters">
            <span>{{'field.' + f.field | translate}}: {{f.value}}</span>
            <a (click)="remove(f)" mz-secondary-content>x</a>
          </mz-collection-item>
        </ng-container>
      </mz-collection>
    </mz-collapsible-item-body>
  </mz-collapsible-item>
</mz-collapsible>

where filters is an array of objects of type {field:xxx, value:xxx}
The error happens when filters array is modified.

Alberto

DatePicker

Hello,

I would like to know if you have in your projects, to set date / time picker directly in module ng2-materialize

Thank you

Error: BrowserModule has already been loaded.

I updated to the new version 1.5.0
And I'm getting this error

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor a lazy loaded module, import CommonModule instead.

I'm using the BrowserAnimationsModule in the AppModule to animate my routes, I also have a SharedModule where I export the MaterializeModule. It would look something like this angular/angular#15829

In the previous version everything worked

Versions

@angular/cli: 1.2.2
node: 8.1.3
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/platform-server: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.2
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1

Thank you for the excellent abstraction of the materialize css that you have been carrying out

button toolbar

Hello,

I have tried to use the button FAB to Toolbar but i can't access to the openToolBar method from materialize-css.js, the method is not there. Old version ?

Collapsible - Preselected section not working

I am using the mz-collapsible component and am unable to have a preselected section opened on load. This issue is observable in the ng2-materialize demo app. Also, the HTML structure example on the demo app shows the [active]="true property on the mz-collapsible-item-header element when it's supposed to be on the mz-collapsible-item element as documented. Either way, it doesn't appear to work as described.

Bug in mz-icon-mdi

I have a table component where I sort the data in a method similar to that.

sortData() {
    ...
    if (this.reserve) {
        this.reserve = false;
        this.data.sort(naturalCompare);
        this.iconSort = 'chevron-down';
    } else {
        this.reserve = true;
        this.data.sort(naturalCompare).reverse();
        this.iconSort = 'chevron-up';
    }
    ...
}

This is the template for this component

<table class="bordered">
    <thead>
      <tr>
        <th (click)="sortData()">Title
          <i *ngIf="iconSort" mz-icon-mdi [icon]="iconSort"></i>
        </th>
        ....
      </tr>
    </thead>
    <tbody>
    ....
    </tbody>
</table>

The behavior I observe is that the mz-icon-mdi directive adds the .mdi-chevron-down class but when the iconSort value changes it the directive add to the new icon class .mdi-chevron-up but the previous icon class dont removed from the element generating the bug which prevents the icon changes.
This bug does not occur with the mz-icon directive

Thank you for the excellent abstraction of the materialize css that you have been carrying out

ps: sorry for my bad english

Unable to bind NgModel to Select with static options

We have tried multiple ways of doing this, but it doesnt seem to be working. Whenever we try to bind a select with ngModel the (already populated) initial value never gets set. On the example project it does... I cant tell what is different, I know there is a thrid part issue with the modal options (materializecss causing that) but with this I am at a loss... this is an absolute must have, and its not working as intended, is there some sort of configuration i am missing?

<mz-select-container class="col s6">
  <select mz-select
    id="options-select"
    [label]="'Label'"
    [placeholder]="'Select a Title'"
    [(ngModel)]="editTherapist.title">
    <option [ngValue]=1>BCBA</option>
    <option [ngValue]=2>RBT</option>
  </select>
</mz-select-container>

mz-select "multiple" does not close in mobile (chrome and Safari)

When I selected my values in the multi-select dropdown and I click outside to close the dropdown it does not close on my iphone. but strangely using S8 it works fine on chrome.
Any idea?