angular-freezeframe

Examples

GH Pages:

http://ctrl-freaks.github.io/freezeframe.js/angular

Install

npm install freezeframe angular-freezeframe

Setup

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AngularFreezeframeComponent } from 'angular-freezeframe'

@NgModule({
  declarations: [
    AppComponent,
    AngularFreezeframeComponent
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Basic usage

app.component.html

<angular-freezeframe src="foo.gif"></angular-freezeframe>

Advanced usage

Here's an example of passing custom options, and binding to a ref using ViewChild so we can manually trigger playback.

app.component.html

<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<button (click)="toggle()">Toggle</button>

<angular-freezeframe
  src="foo.gif"
  #freeze
  [options]="{
    trigger: false,
    overlay: true
  }"
  (startEvent)="log('start', $event)"
  (stopEvent)="log('stop', $event)"
  (toggleEvent)="log('toggle', $event)"
></angular-freezeframe>

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { AngularFreezeframeComponent, AngularFreezeframeEvent } from 'angular-freezeframe'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-freezeframe-demo';
  destroyerVisible = true

  @ViewChild('freeze') freeze!: AngularFreezeframeComponent

  start(): void {
    this.freeze?.start()
  }

  stop(): void {
    this.freeze?.stop()
  }

  toggle(): void {
    this.freeze?.toggle()
  }

  destroy(): void {
    this.destroyerVisible = false
  }

  log(eventName: string, $event: AngularFreezeframeEvent): void {
    console.log({ eventName, $event })
  }
}

Children

You can also pass gifs as children, they will all inherit the any options passed to the parent component.

<angular-freezeframe
  [options]="{
    trigger: 'click'
  }"
>
  <img src="foo1.gif" />
  <img src="foo2.gif" />
  <img src="foo3.gif" />
</angular-freezeframe>

Props

Options

The options prop accepts all options allowed by freezeframe core

<angular-freezeframe
  src="foo.gif"
  [options]="{
    overlay: false,
    trigger: 'click'
  }"
></angular-freezeframe>

Event Listeners

The following event emitters will fire when freezeframe emits the corresponding events:

• startEvent - 'start'
• stopEvent - 'stop'
• toggleEvent - 'toggle'

<angular-freezeframe
  src="foo.gif"
  (startEvent)="log('start', $event)"
  (stopEvent)="log('stop', $event)"
  (toggleEvent)="log('toggle', $event)"
></angular-freezeframe>

Contributing

Assuming you have already read the instructions in the project root:

• First, cd into the appropriate package directory

# start webpack dev server
npm start

# lint and fix issues with eslint
npm run lint -- --fix

# run unit tests
npm test

# build the project and examples for gh-pages
npm run build

Then commit your changes and submit your PR for review.

License

angular-freezeframe.js is released under the terms of the MIT License.