How to change the value of a variable in a separate element?

Question

Angular

When the toggle condition in the toggleDate method fires, I also want to change the value of the "format" variable in a single element, now when clicked, the date format of all elements is changed. How to implement it?

<div class="col-lg-3 col-md-4 col-6" *ngFor="let pic of collection; ">
        <div class="info">
                <img [src]="pic.url" alt="test" class="img-responsive">
                <p class="lead"><span>{{pic.id}}:</span>{{pic.title}}</p>
                <p class="more-info-text">Orc birthday: {{bDay | date: format}}</p>
        </div>
        <div class="card buttons">
            <button class="btn btn-info" (click)="toggleDate(pic.id)">{{toggDate[pic.id] ? 'Full date' : 'Short date'}}</button>
        </div>
    </div>

export class GalleryComponent implements OnInit {
    bDay: object = new Date();
    toggDate: any = [];
    format: string;

    constructor() {}

    toggleDate(picId: number) {
        this.toggDate[picId] = !this.toggDate[picId];
        if (this.toggDate[picId]) {
            this.format = 'shortDate';
        } else {
            this.format = 'fullDate';
        }
    }
}

Answer 1

Replace
with
And the format property can be removed.