Skip to content
Permalink
Browse files

feat: add attribute selector

  • Loading branch information...
smnbbrv committed Dec 18, 2018
1 parent 2575d80 commit f14b3c9d0dd61ac33964b3c54d7c91938fb45941
Showing with 13 additions and 3 deletions.
  1. +11 −1 README.md
  2. +1 −1 projects/ngx-plyr/src/lib/plyr/plyr.component.ts
  3. +1 −1 src/app/app.component.html
@@ -33,14 +33,24 @@ imports: [
],
```

Finally use `plyr` in your components:
Finally use `plyr` in your components as attribute:

```html
<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></div>

<button (click)="play()">Play</button>
```

or tag:

```html
<plyr style="display:block; width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></plyr>

<button (click)="play()">Play</button>
```

and the component file would have

```ts
@ViewChild(PlyrComponent)
plyr: PlyrComponent;
@@ -4,7 +4,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
import { filter, switchMap } from 'rxjs/operators';

@Component({
selector: 'plyr', // tslint:disable-line
selector: 'plyr, [plyr]', // tslint:disable-line
templateUrl: './plyr.component.html',
styleUrls: ['./plyr.component.css'],
exportAs: 'plyr'
@@ -1,5 +1,5 @@
<h1>{{ title }}</h1>

<plyr style="display:block; width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></plyr>
<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></div>

<button (click)="play()">Play</button>

0 comments on commit f14b3c9

Please sign in to comment.
You can’t perform that action at this time.