Here's the code I'm working with:
This is the templateUrl:
<button class="btn btn-success" (click)="showNewPop()" >New</button>{{shownew}}
<app-new-pop *ngIf="shownew" (close)="closeNewPop($event)"></app-new-pop>
And here is the Component.ts file:
private shownew = false;
private myBooksArr:Book[];
constructor(private bookService:BookService) {
this.myBooksArr = Array<Book>();
}
ngOnInit() {
this.getBooks();
}
showNewPop(){
this.shownew = true;
}
closeNewPop(newBook:Book){
this.shownew = false;
if (newBook) {
this.myBooksArr.splice(0, 0, newBook);
}
}
private getBooks(){
this.bookService.getBooks().subscribe(data=>{
data.items.forEach(element => {
this.myBooksArr.push(new Book(element.id,
element.volumeInfo.authors,
element.volumeInfo.publishedDate,
element.volumeInfo.title));
});
});
}
Now, I'm facing an issue where when the myBooksArr array is empty, shownew becomes true but the *ngIf does not display the app-new-pop Component.
I can't seem to figure out why this is happening.
Below is the delete book function for reference:
showDeletePop(i:number) {
this.currnetBook = this.myBooksArr[i];
this.currnetBook.indedx = i;
this.showDelete = true;
}
closeDeleetePop(mydelete:boolean){
this.showDelete = false;
if(mydelete){
this.myBooksArr.splice(this.currnetBook.indedx,1);
}
}
Update!!
I found a workaround that works, in case anyone is interested. Here's the solution:
private flag:boolean= false;
showNewPop(){
console.log(this.myBooksArr.length);
if(this.myBooksArr.length==0){
this.myBooksArr.push(new Book("",[""],"0",""))
this.flag =true;
}
this.shownew = true;
}
closeNewPop(newBook:Book){
this.shownew = false;
if(newBook && !this.flag){
this.myBooksArr.splice(0, 0, newBook);
}
if(newBook && this.flag){
this.myBooksArr.splice(0,1,newBook);
this.flag = false;
}
}
I am still curious to know why it didn't work initially though. If you have any insights, please share!