Angular
Community-driven Angular runtime for Rive

Overview

This guide documents how to get started using the community-built Angular runtime library. The source is available in its GitHub repository. This library contains modules to help integrate Rive into your Angular web application.

Getting Started

Follow the steps below for a quick start on integrating Rive into your Angular app.

1. Install the dependency

1
npm install ng-rive
Copied!

2. Import the module

1
import { RiveModule } from 'ng-rive';
2
3
@NgModule({
4
declarations: [AnimationComponent],
5
imports: [
6
CommonModule,
7
RiveModule,
8
],
9
})
10
export class AnimationModule { }
Copied!

3. Add the Rive file to assets

1
|-- assets
2
| |--rive
3
| |-- vehicles.riv
Copied!

4. Render the Rive template

animation-component.html
1
<canvas riv="vehicles" width="500" height="500">
2
<riv-animation name="idle" play></riv-animation>
3
</canvas>
Copied!

Resources

Last modified 2mo ago