angular 2 animate in *ngFor only one element

Question

I use animation in *ngFor. When i click and do animation, it animate all elements in cycle, but I want animate only one. How can I do that ? .........................................................................................................................................................

   @Component({
    selector: 'app-popular-sensor',
    templateUrl: './popular-sensor.component.html',
    styleUrls: ['./popular-sensor.component.css'],
    animations: [
        trigger('focusPanel', [
            state('in', style({
                height: '20px'
            })),
            state('out', style({
                height: '*',
            })),
            transition('in => out', animate('400ms ease-in-out'))
        ])
    ]
})

export class PopularSensorComponent implements OnInit {

    goods;
    state = 'in';

    constructor(private goodsService: GoodsService) {
        goodsService.getGoods()
            .subscribe(goods => {
                this.goods = goods;
                console.log(this.goods);
            });
    }

    toggleChar() {
        this.state = this.state === 'in' ? 'out' : '';
    }

    ngOnInit() {

    }

}

html:

  <div *ngFor="let g of goods"
         class="col-sm-4 col-xs-12">
        <div class="sensor-block">

            <div class="char_block"
                 [@focusPanel]="state">
                <small *ngFor="let c of g.charact">{{c.name}}</small>
            </div>

            <div class="characteristic"
                 (click)="toggleChar()">Все характеристики смарт стола
            </div>
        </div>
    </div>

Can you try using query ? Ref more here https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#using-query-and-stagger — Aravind S, Mar 02 '18 at 06:49
Thank you it work ! But I thought I can do that without create array for each element, anyway this good example — Стас Рябцев, Mar 02 '18 at 07:05

score 3 · Accepted Answer · edited Jul 06 '20 at 08:59

3

the "key" is not use a global variable, instead a variable belong to the object "g"

<!--g.state-->
<div class="char_block" [@focusPanel]="g.state">
  <small *ngFor="let c of g.charact">{{ c.name }}</small>
</div>

<!--change g.state-->
<div class="characteristic" (click)="g.state=='in' ? 'out':'in'">
  Все характеристики смарт стола
</div>

edited Jul 06 '20 at 08:59

Muhammad Mabrouk

606
9
16

answered Mar 02 '18 at 08:08

Eliseo

50,109
4
29
67

I can't see all picture how it work, but this work fine https://ng-run.com/edit/M5QOQGw0wruwXi0DiorT thanks ! – Стас Рябцев Mar 02 '18 at 10:55
@СтасРябцев briefy explain: you have an array of object, in a object that already exist you can add a variable simply myobject.newproperty=value (if you write {{goods |json }} in your .html you can see it). If this object haven't the property "newpropery", myobject.newproperty add it to the object, if the object have the property, you change the value of property. I would prefer not call a function, just use the ternary operator. g.state=='in' only is true when g.state is 'in' (if it is undefined, not cumply the condition) – Eliseo Mar 02 '18 at 13:27

angular 2 animate in *ngFor only one element

1 Answers1