How to refresh the html data?

[kruthika-vijay]

I have two angular components, say component-1 and component-2 and I'm using
this.pageFlip = new PageFlip(document.getElementById('book1'), { //the elm id is different for both components (book1 and book2)
width: 400, // required parameter - base page width
height: 440, // required parameter - base page height
autoSize: true,
size: 'stretch',
showCover: false,
mobileScrollSupport: true,
disableFlipByClick: true

});
  this.pageFlip.loadFromHTML(document.querySelectorAll(".page"));

when i navigate from one component to other, the html data is not being changed. I can see the parent elm id change from book1 to book2.

how do I refresh the childnode content when I navigate from one component to another?