We want to change the function of the New Rep button so that instead of adding a rep to the entry, the user can actually edit the entry, opening the form with the data filled in.
First, let’s add a new method to the ExerciseSetsService service:
export class ExerciseSetsService {
updateItem(id: string, item: Partial): Observable {
return this.httpClient.put(${this.url}/${id}, item);
}
getItem(id: string): Observable {
return this.httpClient.get(${this.url}/${id});
}
}
In addition to creating the new method by getting a specific item, we also prepared the update method to accept Partial of the ExerciseSet object.
The form for editing the diary entry will be the same as for adding a new entry, with the difference that it will be filled in and will call the update method. So, let’s reuse the NewEntryFormReactiveComponent component for this.
We’ll start by editing the DiaryRoutingModule routes file:
const routes: Routes = [
{
path: ‘entry’,
component: NewEntryFormReactiveComponent,
title: ‘Entry Form’,
},
{
path: ‘entry/:id’,
component: NewEntryFormReactiveComponent,
title: ‘Edit Entry’,
},
];
In the route array, we change the route of the new form to entry and create the entry/:id route.
This route is pointing to the same component, but note that :id tells Angular that it is a dynamic route – that is, it will receive a variable value that must be directed to the route.
With this change, we need to refactor some parts of our application. In the HomeComponent menu, let’s adjust the application route:
<a
routerLink=”./diary/entry”
class="flex items-center space-x-2 text-white">
New Entry
We also need to adjust the journal and input components to call the new route instead of increasing the number of repetitions. In the EntryItemComponent component, we are going to adjust the component’s method and Output instances:
export class EntryItemComponent {
@Input(‘exercise-set’) exerciseSet!: ExerciseSet;
@Output() editEvent = new EventEmitter();
@Output() deleteEvent = new EventEmitter();
delete() {
this.deleteEvent.emit(this.exerciseSet.id);
}
editEntry() {
this.editEvent.emit(this.exerciseSet);
}
}
Here, we remove the treatment and just emit the event. In the template, we will adjust the HTML content:
Edit
We will also adjust the ListEntriesComponent component to properly propagate editEvent:
export class ListEntriesComponent {
@Input() exerciseList!: ExerciseSetList;
@Output()
editEvent
= new EventEmitter();
@Output() deleteEvent = new EventEmitter();
}
We’ll make a small change to the diary to reflect the new route. We’ll do this in the template first:
In the component, we will change the newRep method, which, in addition to the name change, will redirect to the new route:
addExercise(newSet: ExerciseSet) {
this.router.navigate([‘/home/diary/entry’]);
}
deleteItem(id: string) {
this.exerciseSetsService.deleteItem(id).subscribe();
}
editEntry(updateSet: ExerciseSet) {
const id = updateSet.id ??
”;
this.router.navigate([/home/diary/entry/${id}]);
}
To redirect to the new route, we are doing string interpolation to include id that was emitted by the output of the list item. Finally, let’s focus our attention on the form. In the NewEntryFormReactiveComponent component, let’s adjust the button label in the template:
Add Entry
In the NewEntryFormReactiveComponent component, we will adapt it to now be the form for creating and editing entries in our application:
export class NewEntryFormReactiveComponent implements OnInit {
private route = inject(ActivatedRoute);
private entryId?: string | null;
ngOnInit(): void {
this.entryId = this.route.snapshot.paramMap.get(‘id’);
if (this.entryId) {
this.exerciseSetsService
.getItem(this.entryId)
.subscribe((entry) => this.updateForm(entry));
}
}
updateForm(entry: ExerciseSet): void {
let { id: _, …entryForm } = entry;
this.entryForm.setValue(entryForm);
}
}
In the example, we use the OnInit lifecycle hook to configure the form according to the route it was called. For this, Angular has a service called ActivatedRoute.
In the ngOnInit method, we capture the parameter of the route that called our application and, if the component receives the ID, it will fetch the entry from the backend and update the form according to the return.
One detail here is that we are using the destructuring assignment to remove the id field from the object because it does not exist in the form’s data model.
In the same component, we need to change the recording of the diary entry:
newEntry() {
if (this.entryForm.valid) {
const newEntry = { …this.entryForm.value };
if (this.entryId) {
this.exerciseSetsService
.updateItem(this.entryId, newEntry)
.subscribe((entry) => this.router.navigate([‘/home’]));
} else {
this.exerciseSetsService
.addNewItem(newEntry)
.subscribe((entry) => this.router.navigate([‘/home’]));
}
}
}
In the newEntry method, if the component has received the object’s id via the route, it will behave as an edition and call the corresponding method of the exerciseSetsService service.
When we run the project, we now have the input edit form.
Figure 7.3 – Gym Diary edit entry form
From version 16 of Angular, we have an improvement in the use of route parameters. In addition to the ActivatedRoute service, we can map the inputs of page components directly to route variables in our applications.
Let’s refactor our example to this; first, change the main routing module, AppRoutingModule:
@NgModule({
imports: [
RouterModule.forRoot(routes, {
bindToComponentInputs: true,
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
To use this resource, we need to add the bindToComponentInputs attribute in the general configuration of the application’s route.
In our form page, we will refactor as follows:
export class NewEntryFormReactiveComponent implements OnInit {
@Input(‘id’) entryId?: string;
ngOnInit(): void {
if (this.entryId) {
this.exerciseSetsService
.getItem(this.entryId)
.subscribe((entry) => this.updateForm(entry
));
}
}
}
We create Input for the entryId property and define that the route’s wildcard variable will be id. We did this to prevent needing to refactor the rest of the component, but we could also change the property name to also be id, as in this example:
@Input() id?: string;
The important thing here is that Angular automatically binds the information that comes from the route in the attribute, simplifying even more the passing of parameters via the URL to the component.
In the next section, we will learn how to protect the route from being incorrectly accessed by studying route guards.