Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value.
My objective is to set the initial width value of each div to 0% and then dynamically adjust it to the correct percentage once the HTTP request returns with the data. This adjustment should be animated, showing the divs expanding from left to right as the percentage increases (visualized by a color change within the div).
I am seeking advice on the best approach to achieve this animation effect within an Angular 2 environment. While I am aware of the animation property available in the component decorator, I am unsure how to integrate it seamlessly with the asynchronous results received.
The key aspect of my query lies in effectively handling the asynchronously fetched data to implement a smooth animation representing the percentage increase. My current implementation immediately displays the final result without triggering any animation – which is essential for my project requirements.
I understand that there are multiple strategies to accomplish this task, but I would appreciate guidance on selecting the most efficient solution.
Below is the code snippet for reference:
import { Component, OnInit } from '@angular/core'
import { SkillsService } from './skills.service'
@Component({
selector: 'skills',
template: `
<section class="skills">
<div *ngFor="let skill of skillsService.skills$ | async">
<div class="skills__bar" [style.width]="skill.percentage + '%'">
<h3 class="skills__title">{{skill.title}}</h3>
</div>
</div>
</section>
`,
})
export class SkillsComponent implements OnInit {
constructor(private skillsService: SkillsService) {}
ngOnInit() {
this.skillsService.fetchSkills()
}
}
Your input and suggestions on this matter are highly appreciated. Thanks in advance!