search

web-dave / angular_workshop

0 stars 0 forks source link

Use the Service #7

Open web-dave opened 4 months ago

web-dave commented 4 months ago
  1. Get BoookService into BookList via DI
    book-list.component.ts
 service = inject(BookService);

  1. Get All Books
    book-list.component.ts
 ...
  books: any[] = [];
  getAllBooks() {
    this.service.getAll().subscribe((data) => (this.books = data));
  }

  1. Show all Books
    book-list.component.html
 ...
@for (book of books; track $index) {
<div class="book">
  <strong>{{ book.title }}</strong> <br />
  <small>{{ book.subtitle }}</small>
</div>
}

  1. Styling
    book-list.component.scss
@import "../../../utils";

.book {
  @include object(100%, 60px, $aqua);
  border-radius: 90px;
  margin-top: 10px;
  padding-left: 45px;
  padding-top: 10px;
}

web-dave commented 4 months ago

NEXT