@for (book of allBooks; track book.name) {
    <div>
        {{ book.name }} - {{ book.pages }}
        <i>{{ book.author }}</i>
        <button (click)="deleteBook(book)">Delete</button> | <button (click)="addToFavourites(book)">Add to favourites</button>
        <hr/>
    </div>
}
{{message}}

<hr/>

<select [(ngModel)]="name">
    @for (item of allBooks; track item.name){
        <option value="{{item.name}}">{{item.name}}</option>
    }
</select>
<input type="text" [(ngModel)]="pages">
<button (click)="updateBook()">Update</button>

<hr/>

<b>My favourites</b>
@for (item of user.favourites; track item.name){
    <div>
        {{item.name}} - {{item.date | date}} <button (click)="deleteFavourite(item.name)">Delete</button> | <button (click)="updateFavourite(item.name)">Update</button>
    </div>
}
