3.0.0 • Published 2 years ago
ngx-danmaku v3.0.0
Ngx-Danmaku
Ngx-Danmaku is the Angular library to display flying comments on iframes element.
Installation
We recommend using @angular/cli to install,it not only makes development easier,but also allow you to take advantage of the rich ecosystem of angular packages and tooling.
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ngx-danmaku
You can install it with npm:
$ npm install ngx-danmaku
Usage
app.module.ts
import { NgxDanmakuModule } from 'ngx-danmaku';
@NgModule({
declarations: [
AppComponent
],
imports: [
NgxDanmakuModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
src = 'some iframe source url';
message$ = interval(200).pipe(map((x) => 'Hello' + x)); // Observable message
}
app.component.html
<ngx-danmaku [src]="src" messagePosition="top" [newMessage]="message$ | async"></ngx-danmaku>
API
Property | Description | Type |
---|---|---|
src | Iframe source url | string |
newMessage | Value of new message | string |
styles | ngStyle of iframe element | object |
messagePosition | Position of message | "top" | "middle" | "bottom" |
visible | Whether show Danmaku message | boolean |