CODEWITHSUNDEEP
angulartypescriptangular-animations
Osmar Matos
Osmar Matos

Reputation: 372

Angular 2/4 animate one item inside an array instead of all items

I am trying to build some meaningful motion for a portfolio. The goal is when a user clicks on a job item, the item pop up and grow. To do that, I believe I have to change the state of the clicked element inside an array, but when I click it now, it affects all states of all elements inside the array animating all together. Can anyone explain me whats happening and how to fix?

portfolio.component.ts

import { Component } from '@angular/core';
import { trigger,style,transition,animate,keyframes,state,query,stagger } from '@angular/animations';

export class Job {
  id: number;
  title: string;
}

const JOBS: Job[] = [
  { id: 11, title: 'Item 1' },
  { id: 12, title: 'Item 2' },
  { id: 13, title: 'Item 3' },
];

@Component({
  selector: 'portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.css'],
  animations: [
    trigger('enlarge', [
        state('small', style({
            height: '100px',
        })),
        state('large', style({
            height: '200px',
            background: 'red',
        })),
        transition('small <=> large', 
        animate('1s ease-in')),
    ]),

  ]
})

export class PortfolioComponent {
    title   = 'Portfolio';
    jobs    = JOBS;

    state: string = 'small'

    enlarge() {
        this.state = (this.state === 'small' ? 'large' : 'small');
    }
}

portfolio.component.html

<div class="list" 
*ngFor='let job of jobs'
[@enlarge]='state'
(click)="enlarge()">
    <div for="#">{{job.id}} - {{job.title}}</div>
</div>

Upvotes: 2

Views: 2990

Answers (2)

Osmar Matos
Osmar Matos

Reputation: 372

With some external help and research I figured out the solution to my problem.

portfolio.component.ts

import { Component } from '@angular/core';
import { trigger,style,transition,animate,keyframes,state,query,stagger } from '@angular/animations';

export class Job {
  id: number;
  title: string;
  state: string;
}   

@Component({
  selector: 'portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.css'],
  animations: [
    trigger('enlarge', [
        state('small', style({
            height: '100px',
            transform: 'translateY(0)',
        })),
        state('large', style({
            height: '200px',
            transform: 'translateY(-300px)',
            background: 'red'
        })),
    ]),

  ]
})

export class PortfolioComponent {
    title   = 'Portfolio';

    jobs = [
        { id: 11, title: 'Item 1', state: 'small' },
        { id: 12, title: 'Item 2', state: 'small' },
        { id: 13, title: 'Item 3', state: 'small' },
    ];

    enlarge(index) {
        index.state = (index.state === 'small' ? 'large' : 'small');

    }
}

portfolio.component.html

<div class="list" 
*ngFor='let job of jobs'
[@enlarge]='job.state'
(click)="enlarge(job)">
    <div for="#">{{job.id}} - {{job.title}}</div>
</div>

Upvotes: 3

TheUnreal
TheUnreal

Reputation: 24462

Currently you assign the same state using the same variable to all items. What you need to do is to assign different state to each item.

  1. Set a default state for all items:

    this.jobs = this.jobs.map((job) => {
  job.state = "small";
  return job;
});

  2. Update your template:

Set [@enlarge]='state' to [@enlarge]='job.state'

  1. Update your enlarge() method:

    enlarge(index) {
let job = this.jobs[index].state;
job = (job === 'small' ? 'large' : 'small');
     }

Upvotes: 3

Related Questions