RK-J

Approaches tried (did not work)-

1. subscribing to subjectEmitter (emitted by website-search.component.ts) event INSIDE router.event.subscribe (this subscription was already present and settting canonical was working perfect) and then update tag accordingly when event is emitted.

2.without using any subscription or event , setting the canonical inside website-search.component.ts file just after we fetch books.

3.change the code of link service (green tick answer) and tried directive (last answer) of the document https://stackoverflow.com/questions/50737862/how-to-add-canonical-link-in-angular-5

4.tried console.log() statements in ssr commands to know the difference when it is working (previous working code) and when it is not working.

helpful Url- https://github.com/angular/angular/issues/15776

some findings-
while updating canonical link tag using function (lets call it UpdateSubject(fakeSubject:string)) with fake hardcoded subject (so no subscription or event emitter needed) from the website-search.component.ts using link service, I found that if I put updateSubject() inside constructor or ngOninit of website-search.component.ts, it shows effect in view page source, but If I put the same function somewhere else (like after getBooks() or inside getBooks() or inside onSelectBook()), it does not shows effect in view page source, but in inspect element, we can see change.

Whirlwind book: https://edutestqa.appspot.com/document/python-book-whirlwind-tour?documentURL=10054%2Fprd%2FWhirlwindTourOfPython%2F06-built-in-data-structures-Lists-35.html

Tutorial book: https://edutestqa.appspot.com/document/python-3-doc-tutorial?documentURL=10014%2Fprd%2F3%2Ftutorial%2Fdatastructures--Dictionaries-40.html

Pandas development: https://edutestqa.appspot.com/document/pandas-development?documentURL=10066%2Fpk20oct21%2Fdocs%2Fdevelopment%2Fcontributing_docstring-Parameter-types-35.html