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.