In the books.component.ts file

export class BooksComponent{
  // books variable
  books: IBook[] = [];

  // constructor to initialize BookService
  constructor(private bookService: BookService) {}

  // Handle Dialog
  readonly dialog = inject(MatDialog);

  openDialog() {
    const dialogRef = this.dialog.open(BookAddDialogComponent, {
      data: { booksCount: this.books.length },
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        const newBook = dialogRef.componentInstance.newBook;
        console.log(newBook); // { id: 0. title: 'Harry Potter', author: 'J.K. Rowling'}
        this.books = this.bookService.addBook(this.books, newBook);
        console.log(this.books); // [{ id: 0. title: 'Harry Potter', author: 'J.K. Rowling'}]
      }
    });
  }

}

In the books.component.html file

  <h4>Book List ({{ books.length }})</h4>
  <ul>
    <li *ngFor="let book of books">
      {{ book.id }} - {{ book.title }} - {{ book.author }}    
    </li>
  </ul>

I have checked the console. It shows proper values for both newBook & this.books. But it does not show in the html file.

I tried setting the this.books variable in localStorage & then getting it back so that this.books sustains with reload. It worked then, when I refreshed the page it has successfully added the new book and showed in view. But Without reload it did not update in the view.

I also tried modifying a dummy variable a inside the subscribe block

export class BooksComponent{
  a: number = 0;

  // Handle Dialog
  readonly dialog = inject(MatDialog);

  openDialog() {
    const dialogRef = this.dialog.open(BookAddDialogComponent);

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
       this.a = 1;
       console.log(a) // 1
      }
    });
  }

}

In the books.component.html file

  <h4> {{ a }} </h4> // 0

It still did not update in the view. a still showed 0 in view. console.log(a) shows 1 but in view it is unchanged.

This issue is only happening inside the subscribe block. If I make any changes to the variable outside the block like this

export class BooksComponent{
  a: number = 0;

  // Handle Dialog
  readonly dialog = inject(MatDialog);

  openDialog() {
    const dialogRef = this.dialog.open(BookAddDialogComponent);

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
       
      }
    });

    this.a = 1;
    console.log(a) // 1
  }

}

In the books.component.html file

  <h4> {{ a }} </h4> // 1

Then it works fine and shows proper value in view.

Please help me figure out the issue.