I have a unique component called book-smart that has the functionality to display either book-update or book-create based on the availability of a BookDto in my book.service. The update feature can be accessed by clicking a button in a table, while the create feature can be accessed by clicking a button in the navbar.
The issue arises when a user clicks on the update button and then proceeds to click on the create button. Despite trying to nullify the variable by setting this.bookService.book = null, an error occurs stating:
Type 'null' is not assignable to type 'BookDto'.Below are my classes:
export class BookSmartComponent implements OnInit {
constructor(private bookService: BookService) { }
book!: BookDto;
ngOnInit(): void {
if(this.bookService.book) {
this.book = this.bookService.book;
this.bookService.book = null // Error
}
}
}
book-smart.component.html
<sandbox-book-insert [hidden]="book"></sandbox-book-insert>
<sandbox-book-update [hidden]="!book" [book]="book"></sandbox-book-update>
book.service.ts
export class BookService {
book!: BookDto;
constructor() {}
}