How to change attribute when object changed?

I have the list of elements which looks like this

<ion-list *ngSwitchCase="'activities'">
    <ion-item-sliding *ngFor="let activity of activities; let i = index;" (ionDrag)="itemDragged($event, i)" (click)="showModalInfo(activity)">
            <ion-icon [name]="activities[i].direction_icon" style="float:right"></ion-icon>
            <h2>{{ activity['Event type'] }}</h2>
        <ion-item-options side="right">
            <button ion-button color="light" icon-left (click)="$event.stopPropagation(); showModalInfo(activity)">
                <ion-icon name="ios-more"></ion-icon>
            <button ion-button color="primary" icon-left>
                <ion-icon name="text"></ion-icon>

And the function bidden to the event:

itemDragged(event, index) {
    let percent = event.getSlidingPercent()

    let direction_icon = null

    if (percent > 0.5) {
        direction_icon = 'arrow-dropright'
    } else {
        direction_icon = 'arrow-dropleft'

    this.activities[index].direction_icon = direction_icon


    console.log(percent, direction_icon)

The problem is that <ion-icon [name]="activities[i].direction_icon" style="float:right"></ion-icon> not changes or changes only once some times…


console.log print everything right but no visual changes.