Angular 6 query

St1mpMeister

Hi, just started into Angular 6 coding and have a question which I'm sure is pretty basic.

I have an api call that populates an array which is used to with an ngFor to output a list of divs...

[B]Controller snippet:[/B]

books: Book[];
bookContent: BookContent[];

ngOnInit() {
    this.getBooks();
  }

  getBooks(): void {
    this.webApiService.GetBooks()
      .subscribe(x => this.books = x);
  }

  getBookContent(book: book): void {
    this.webApiService.GetBookContent(book.Id)
      .subscribe(x => this.bookContent = x);
  }


[B]View snippet:[/B]

<div *ngFor="let book of books">
  <div>
    <span>Book name: {{book.Name}}</span>
    <span><button (click)=getBookContent(book)>View details</button>/span>
  </div>
</div>

<div *ngIf="bookContent?.length > 0">
      <div *ngFor="let content of bookContent">{{content.Details}}</div>
</div>

(ignore fact that bookContent is an array for now)

This works fine, and updates the one "bookContent" div whenever I click each of the buttons.

What I want to do, though, is have a bookContent div for each book, rather than all of them using one.


e.g.

[B]View snippet:[/B]

<div *ngFor="let book of books">
  <div>
    <span>Book name: {{book.Name}}</span>
    <span><button (click)=getBookContent(book)>View details</button>/span>
    <div>[I][B]RELATED BOOK CONTENT GOES HERE WHEN BUTTON CLICKED[/B][/I]</div>
  </div>
</div>

i.e. the content will appear in the same div as the book name, and it should be possible to see several book content inner divs at once.

My Googling is proving fruitless, but I'm assuming this is pretty straightforward to achieve?

Goodshape

Plenty of ways to skin a cat, but how about something like this:

Controller snippet:

books: Book[];
bookContent: { id: number, content: BookContent }[] = [];

ngOnInit() {
    this.getBooks();
  }

  getBooks(): void {
    this.webApiService.GetBooks()
      .subscribe(x => this.books = x);
  }

  getBookContent(book: book): void {
    this.webApiService.GetBookContent(book.Id)
      .subscribe(x => this.bookContent = x);
  }

  hasBookContent(book): boolean {
    return !!this.bookContent.find(x => x.id === book.Id);
  }

  bookContent(book): BookContent {
    return this.bookContent.find(x => x.id === book.Id).content;
  }


View snippet:

<div *ngFor="let book of books">
  <div>
    <span>Book name: {{book.Name}}</span>
    <span><button (click)=getBookContent(book)>View details</button>/span>

    <div *ngIf="hasBookContent(book)">
        <div *ngFor="let content of bookContent(book)">{{content.Details}}</div>
    </div>
  </div>
</div>

St1mpMeister

I'll give it a go thanks!