• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

173
Views
How to start animation between routers after component's data is been load from a service

I have a nice animation between my routes and I added a warp to every component to show the component only after the data has been loaded, it's look like this:

my component HTML file:

<div *ngIf="isDataAvailable">
   ...my component html template...
</div>

and this is my ts file:

isDataAvailable:boolean = false;
ngOnInit() {
    this.subscription = this.clientsService.getClients().subscribe(
      (result:any) => {
        this.data = result.clients;
        this.isDataAvailable = true;
      }
    );
}

in my root ts file I have this animation settings:

import { customTransition } from './custom-transition.animation';

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html',
  styleUrls: [
    './master.component.css',
  ],
  animations: [customTransition()],
  encapsulation: ViewEncapsulation.None
})

and this is my HTML template for the root file

<ng2-page-transition [animation]="customAnimation">
    <div [@ng2ElementState]="customAnimation.state">
        <router-outlet></router-outlet>
    </div>
</ng2-page-transition>

my issue right now is that some components are loading fast and some are loading slowly because of the data they have and this is fine but those that are loading slowly the user don't see the animation but just the component is shown when it is ready.

I would like to start the animation after the data is beeing load maybe even to show some preloader for the user before the component is ready.

thank you!

EDIT:

this is my customTransition.animation.ts file:

//custom-transition.animation.ts
import {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core';

export function customTransition():AnimationEntryMetadata {
  return slideOutAndIn();
}

function slideOutAndIn():AnimationEntryMetadata {
  return trigger('ng2ElementState', [
    state('leave', style({
        position:'inherit', 
        display:'block',
        width:'100%'
    })),
    state('enter', style({
        position:'inherit', 
        display:'block',
        width:'100%'
    })),
    transition('* => enter', [
        style({
            transform: 'translateY(10%)',
            opacity: 0
        }),
        animate('0.5s ease-in-out', style({
            transform: 'translateY(0%)',
            opacity: 1
        }))
    ]),
    transition('* => leave', [
      style({
        transform: 'translateY(0%)',
        opacity: 0
      }),
      animate('0.5s ease-in-out', style({
        transform: 'translateY(-10%)',
        opacity: 0
      }))
    ]),
  ]);
}
about 3 years ago · Santiago Trujillo
1 answers
Answer question

0

the animation should be inside the component and not in the root file, so this is my result:

import {trigger, state, animate, style, transition, AnimationEntryMetadata} from '@angular/core';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css'],
  animations: [trigger('slideIn', [
    state('inactive', style({
        transform: 'translateY(10%)',
            opacity: 0
    })),
    state('active', style({
        transform: 'translateY(0%)',
            opacity: 1
    })),
    transition('active => inactive', animate('.6s ease')),
    transition('inactive => active', animate('.6s ease'))]
  ]
})

export class ClientsComponent implements OnInit,OnDestroy {
  state:string = "inactive";

  constructor( private clientsService: ClientsService) {}

  ngOnInit() {
    this.updateData();
  }

  updateData(){
    this.subscription = this.clientsService.getClients().subscribe(
      (result:any) => {
        this.data = result.clients;
        this.state = "active";
      }
    );
  }
}
about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error