Currently in the process of learning Angular Routing, I encountered an error. In the course component, I attempted to make changes to the web content by utilizing queryParams and a variable editMode: boolean with its default value set to false.
Access link here
course.component.ts
export class CourseComponent implements OnInit, OnDestroy {
constructor(private service: CoursesService, private route: ActivatedRoute, private router: Router) { }
course: any;
courseId: any;
routeParamObservable: any;
queryParamObservable: any;
editMode: boolean = false;
addQueryParam() {
this.router.navigate(['/Course', this.courseId], { queryParams: { edit: true } });
}
//saveUpdateNameChange() {
//this.router.navigate(['/Course', this.courseId]);
//}
saveUpdateNameChange() {
this.router.navigate(['/Course', this.courseId], { queryParams: { edit: false } });
}
ngOnInit(): void {
this.routeParamObservable = this.route.paramMap.subscribe({
next: (param) => {
this.courseId = param.get('id');
this.course = this.service.courses.find(x => x.id == this.courseId);
}
})
this.router.navigate(['/Course', this.courseId]);
this.queryParamObservable = this.route.queryParamMap.subscribe({
next: (param) => {
this.editMode = Boolean(param.get('edit'));
console.log(this.editMode);
}
})
}
ngOnDestroy(): void {
this.routeParamObservable.unsubscribe();
this.queryParamObservable.unsubscribe();
}
}
course.component.html
<div class="course-container">
<div>
<img src="{{course.image}}" width="560" height="280">
</div>
<div>
<h1 *ngIf="!editMode" style="text-align: center;">{{course.name}}</h1>
<div *ngIf="editMode" style="text-align: center;">
<input type="text" [(ngModel)]="course.name">
</div>
</div>
<div class="course-details">
<div style="margin: 0px 10px;"><b>Author: </b>{{course.author}}</div>
<div style="margin: 0px 10px;"><b>Duration: </b>{{course.duration}}</div>
<div style="margin: 0px 10px;"><b>Type: </b>{{course.type}}</div>
</div>
<div style="margin: 0px 10px;">
<h2>Price: {{course.price}}$</h2>
</div>
<div style="margin: 20px 10px;">
<p>{{course.description}}</p>
</div>
<button (click)="addQueryParam()" *ngIf="!editMode">Edit</button>
<button (click)="saveUpdateNameChange()" *ngIf="editMode">Save Update</button>
</div>
After calling the addQueryParam() method:
- When attempting to save the changes using
, although routing works fine, accessing queryParams in the ngOnInit method seems to be ineffective as the console log does not display "false".saveUpdateNameChange() {this.router.navigate(['/Course', this.courseId], { queryParams: { edit: false } });} - Conversely, when invoking
without queryParams, both routing and the retrieval of queryParams within ngOnInit work smoothly, with the console log accurately showing "false".saveUpdateNameChange() {this.router.navigate(['/Course', this.courseId]);}
Hence, how is it that the method for accessing queryParams in ngOnInit functions properly when called without queryParams, but fails to do so when invoked with queryParams in this specific scenario?
PS: Apologies if my query is unclear.