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"> </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
Just pass selectedDay
to methods. For removeAbsence
it is easier to pass index instead of item itself.
addAbsence(day: DayOfWeek, absence: ITimesheetAbsence): void {
day.absences.push(absence);
}
removeAbsence(day: DayOfWeek, absenceIndex: number): void {
day.absences.splice(absenceIndex, 1);
}