using ng-model equivalent with collapsible

[scottschafer]

I'm a newbie to Angular2 and materialize, so apologies if i'm missing the obvious.

What I'm looking for is a way to do two-way binding on the currently expanded section of a collapsible accordion view.

That, I want to set up my component to contain a parameter that 1) contains an index of the currently expanded section, and 2) when modified, expands the specified section (I want the first section to be automatically expanded). If there's a more correct way to do this in Angular2, please let me know as well.

BTW, I looked at materializeParams, but the documentation is lacking IMO. I could not make heads or tails of "The Materialize attribute directive also allows specifying parameters to be passed to the function, but providing a materializeParams attribute returning an array of params".

Thanks in advance!

[rubyboy]

@scottschafer IMO you should try to get away from 2-way data binding and use the actions to trigger the onOpen and onClose to update your data model.

You can look at the code example to understand how to use the params. For your convenience I've also added sample code in the collapsible app example: https://github.com/InfomediaLtd/angular2-materialize/blob/master/app/components/collapsible.ts.

Here's the code to illustrate how you'd have a default open section (Add "active" to the header of the section you want to open) and trigger code when a section opens or closes (call your init functions):

@Component({
    selector: "collapsible",
    template: `
        <ul materialize="collapsible" class="collapsible" data-collapsible="accordion" [materializeParams]="params">
          <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
          </li>
          <li>
            <div class="collapsible-header active"><i class="material-icons">place</i>Second</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
          </li>
          <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
          </li>
        </ul>
    `
})
export class Collapsible {
    params = [
      {
        onOpen: (el) => {
          console.log("Collapsible open", el);
        },
        onClose: (el) => {
          console.log("Collapsible close", el);
        }
      }
    ];
}

[rubyboy]

@scottschafer if you have ideas how to improve the docs PRs are very much welcomed! :)