Skip to content

Commit

Permalink
fix(): Fixed Template properties errors
Browse files Browse the repository at this point in the history
  • Loading branch information
Sergey Akopkokhyants committed Sep 19, 2016
1 parent 63c5da4 commit 8884db2
Showing 1 changed file with 8 additions and 3 deletions.
11 changes: 8 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
<div>Hello world</div>
<button (click)="startLoading()">Start Loading</button>
<button (click)="stopLoading()">Stop Loading</button>
<button (click)="completeLoading()">Complete Loading</button>
<ng2-slim-loading-bar></ng2-slim-loading-bar>
`
})
Expand All @@ -107,17 +108,21 @@ export class AppComponent {
stopLoading() {
this.slimLoadingBarService.stop();
}

completeLoading() {
this.slimLoadingBarService.complete();
}
}
```

#### 3. Customize the the `ng2-slim-loading-bar` for your application
You can use the following properties to customize the `ng2-slim-loading-bar` component in your template:
- `color` - The color of loading bar. Default is `firebrick`. Any CSS compatible value.
- `height` - The height of loading bar. Defaukt value is `2px`.
- `show` - The flag helps hide and show the loading bar. Devault value is `true`
- `height` - The height of loading bar. Default value is `2px`.
- `show` - The flag helps hide and show the loading bar. Devault value is `true`.

Example:
`<ng2-slim-loading-bar [color]="blue" [height]="4px"></ng2-slim-loading-bar>`
`<ng2-slim-loading-bar [color]="'blue'" [height]="'4px'"></ng2-slim-loading-bar>`

#### 4. Manage the loading bar
You can use the following properties to customize the SlimLoadingBar via instance of SlimLoadingBarService:
Expand Down

0 comments on commit 8884db2

Please sign in to comment.