Skip to content

Commit

Permalink
fix: Doc fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
rubyboy committed Nov 4, 2016
1 parent e585e08 commit 80f70f2
Showing 1 changed file with 7 additions and 20 deletions.
27 changes: 7 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,11 @@ For example, to apply tooltip:
<a materialize="tooltip" class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am tooltip">Hover me!</a>
```

The [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML:
The [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize.ts) attribute directive also allows specifying parameters to be passed to the function, but providing a **materializeParams** attribute returning an array of params. Use it with a function call or even by inlining the params in the HTML.

Another useful option is emitting actions on an element. You may want to do that for calling Materialize functions, like closing a modal dialog or triggering a toast. You can do that by setting the **materializeActions** attribute, which accepts an [EventEmitter](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html). The emitted events can either be a "string" type action (Materialize function call) or a structure with action and parameters:

The example below shows how you'd create a modal dialog and use the actions to open or close it.
```html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" (click)="openModal()">Modal</a>
Expand All @@ -101,6 +105,8 @@ The [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/mast
</div>
```
```js
import {MaterializeAction} from 'angular2-materialize';
//...
modalActions = new EventEmitter<string|MaterializeAction>();
openModal() {
this.modalActions.emit({action:"modal",params:['open']});
Expand All @@ -110,25 +116,6 @@ The [Materialize](https://github.com/InfomediaLtd/angular2-materialize/blob/mast
}
```
Another useful option is emitting actions on an element. You may want to do that for calling Materialize functions, like closing a modal dialog or triggering a toast. You can do that by setting the **materializeActions** attribute, which accepts an [EventEmitter](https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html). The emitted events can either be a "string" type action (Materialize function call) or a structure with action and parameters:
```html
<div id="modal1" class="modal" materialize [materializeActions]="modalActions">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class="waves-effect waves-green btn-flat" (click)="closeModal()">Close</a>
</div>
</div>
```
```js
modalActions = new EventEmitter<string|MaterializeAction>();
closeModel() {
this.modalActions.emit({action:"modal",params:['close']});
}
```

For dynamic select elements apply the **materializeSelectOptions** directive to trigger element updates when the options list changes:
```html
<select materialize="material_select" [materializeSelectOptions]="selectOptions">
Expand Down

0 comments on commit 80f70f2

Please sign in to comment.