How to modify data in an angular component when using async pipe

I have an Angular 18 component that receives an observable, which I render on the page using an async pipe. I want to be able to modify the data within this component and then press a "Save" button.

Before The save button is pressed, how do I edit the values within this component? I am somewhat new to working with async pipes and normally I would have just subscribed within the component, but I am trying to stick to best practices and avoid subscribing where I can, instead have the async pipe take care of this.

Here's what I am doing, and

export class TimesheetSelectedDayComponent {
private readonly activatedRoute = inject(ActivatedRoute);
private readonly timesheetService = inject(TimesheetService);

//whenever the route params OR the selected timesheet changes...
selectedDay$ = combineLatest({
params$: this.activatedRoute.paramMap,
timesheet$: this.timesheetService.selectedTimesheet$,
}).pipe(
switchMap((results) =>
//now get the matching day from the timesheet
of(results.timesheet$?.days.find((d) => d.date.dayOfWeek === results.params$.get('dayOfWeek'))),
),
);

addAbsence(absence: ITimesheetAbsence): void {
//How do I add this to the selectedDay.absences array?
}

removeAbsence(absenceTimeEntity: ITimesheetAbsence): void {
//How do I remove this from the selectedDay.absences array?
}
}


@if (selectedDay$ | async; as selectedDay) {
<h5 class="card-header">{{ selectedDay.date }}</h5>
<div class="card-body">
<ul class="list-group">
<li class="list-group-item">
<app-time-entity-editor name="Work Day" [timeEntityObject]="selectedDay.workDay" />
</li>
<li class="list-group-item">
<app-time-entity-editor name="Lunch" [timeEntityObject]="selectedDay.lunch" />
</li>
@for (absence of selectedDay.absences; track $index) {
<li class="list-group-item">
<app-time-entity-editor
isRemovable="true"
[name]="absence.name"
[timeEntityObject]="absence"
(removeClick)="removeAbsence($event)"
/>
</li>
}
</ul>

<app-absence-selector class="d-block mt-2" (selectAbsence)="addAbsence($event)" />
</div>

<button type="button" class="btn btn-outline-success btn-lg">Save</button>
</div>
} @else {
<h5 class="card-header">&nbsp;</h5>
<div class="card-body">
<app-spinner />
</div>
}


Basically I want to have the ability to make changes to the data in my component before I save the changes and make the observable react in other areas where it is subscribed to

Continue reading...