Useful Angular Components

Install package npm install ngx-useful-components --save-dev

Import module

import { NgxUsefulComponentsModule } from "ngx-useful-components"; 
 
@NgModule({
  imports: [
    NgxUsefulComponentsModule 
  ]
})

...or import components seperately

import { YoutubeComponent, IconComponent } from "ngx-useful-components"; 

@NgModule({
  declarations: [
    YoutubeComponent,
    IconComponent 
  ]
})

Included components

1. Youtube

<youtube
  [url]="'https://www.youtube.com/watch?v=Wx_2SVm9Jgo'" 
  (ready)="ready($event)" 
  (stateChange)="stateChange($event)" 
  [playerVars]="{ autoplay: 1, controls: 1 }">
</youtube>

export class YourComponentName {
  ready(event) {
    console.log("YT_ready", event)

    // play video
    event.target.playVideo();
  }

  stateChange(event) {
    console.log("YT_state_change", event)
  }
}

Have a look at the official YouTube documentation. With events you have complete control over the player instance with methods like event.target.pauseVideo() and event.target.stopVideo().

• player instance using event.target
• events stateChange and ready
• playerVars for example { autoplay: 1, controls: 1 }

2. Icon

<icon
  [baseUrl]="baseUrl" 
  [anchor]="anchor">
</icon>