how to change html view using binding in angular 6 - binding

Question

I have an angular 6 project , I have a component for book like this
<div class="col-md-4 agileinfo_single_left">
<img id="BigBookView" src="public/books/images/{{book.photo}}" alt=" " class="img-responsive">
</div>
<div class="col-md-8 agileinfo_single_right">
<h1>{{book.name | uppercase}}</h1>
<h2>Series: {{book.seriesName}}</h2>
<h3>Author: {{book.author}}</h3>
<h4></h4>
<div class="w3agile_description">
<h4>Summary : {{book.summary}}</h4>
</div>
<div class="snipcart-item block">
<div class="snipcart-thumb agileinfo_single_right_snipcart">
<h4 class="m-sing">Price: {{book.price}}$</h4>
<h4 class="m-sing">Seller: {{book.seller}}</h4>
</div>
<div class="snipcart-details agileinfo_single_right_details">
<form action="#" method="post">
<fieldset>
<input type="submit" name="submit" value="Add to cart" class="button">
</fieldset>
</form>
</div>
</div>
all of this is inside a modal and every time I choose a book and the modal is opened and suppose to show the book data in this html.
This is the component type script
export class BigBookViewComponent implements OnInit {
#Input()
public book:Book = new Book();
constructor() { }
ngOnInit() {
}
public changeBook(newBook: Book) {
console.log(this.book);
this.book = newBook;
}
}
using the function changeBook I send to this component a new book to show but the html and the UI don't chagne, even though I can see in the console.log(this.book); line that the book is indeed being sent.
How can I change the html to show a diffrent book?

Answer 1

You should assign the book on ngOnInit method.
When assigning in the constructor the single instance of the component will keep the original book.