onOpen and onClose Params

[maurocappe]

I am having trouble with the onOpen and onClose options materialize css provides. Are they not supported by angular2-materialize? i am trying to use them to make the sidenav push the content of the page instead of overlaying on top.
Here's the code:

openNav() { document.getElementById('body').style.marginLeft = '300px'; document.getElementById('sideNav').style.width = '300px'; document.getElementById('sideNav').style.visibility = 'active'; document.body.style.backgroundColor = 'rgba(0,0,0,0.4)'; document.body.style.backgroundColor = '#176EB1'; }

closeNav() { document.getElementById('body').style.marginLeft = '0px'; }

<a href="#" data-activates="sideNav" materialize="sideNav" [materializeParams]="[{onOpen: openNav(), onClose: closeNav()}]" class="nav-link button-collapse left"><i class="material-icons">menu</i></a></li>

[KyDenZ]

Hello,

I have the same question about the datepiker(date & time), how to call a function when the modal datepicker is closed.

Thank you

[rubyboy]

@KyDenZ here's an example of datepicker binding to onClose:

@Component({
    selector: "datePicker",
    template: `
            <input materialize="pickadate"
                   [materializeParams]="[{format: 'dd/mm/yyyy', onClose: doSomething }]"
                   type="text" />
        `
})
export class DatePicker {

    doSomething() {
        console.log("here!");
    }
}

@maurocappe looking at youre code I see that the onOpen/onClose just calls the function when it's initialized. Remove the braces to make it a reference to a function and it should work (make it onOpen:openNav, onClose:closeNav).

[KyDenZ]

Perfect thank you !

[maurocappe]

oh... well.. rookie mistake.
Thanks a lot.

[neXyon]

Thanks for the example @rubyboy but in your example this in doSomething then is the pickdate object and not the component. How can I get the object of my component class?

[neXyon]

Found a solution, in the component:

  dateParams = [{
    // other parameters you want to have
    onSet: () => { this.search(); }
  }]

and then in the template it's as simple as using [materializeParams]="dateParams".