ngx-star-port

ngx-star-port

Shared Angular components across routes with animations

Live Demo

Introduction

Ngx-star-port enables you to seamlessly transition shape and position of a component from one route to the other. While this might be a common task in native apps, the architectural design of frontend frameworks such as Angular makes this more difficult to achieve. The main concept of this library is inspired by VueStarport.

Install

npm i ngx-star-port

Usage

1. Add NgxStarPortModule to your imports in your app.module.ts

import { NgxStarPortModule } from 'ngx-star-port';

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

2. Add the <ngx-star-port-carrier> component to the bottom of your app.component.html. The <ngx-star-port-carrier> component is a layer in which the animations between route changes are beeing performed in.

<!--app.component.html-->
<router-outlet></router-outlet>
<ngx-star-port-carrier></ngx-star-port-carrier>

3. Wrap components that should be transitioned between route changes inside the <ngx-star-port> component and set a unique id. The id helps <ngx-star-port> to identify the origin and the destination of the transitioned component.

<!-- page-a.component.html -->
<ngx-star-port id="my-id">
    <my-component></my-component>
</ngx-star-port>

Make sure to use the same id when wrapping the destionation component

<!-- page-b.component.html -->
<ngx-star-port id="my-id">
    <my-component></my-component>
</ngx-star-port>