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