src/app/book-list/grid-view/grid-view.component.ts
Component that displays all the books arranged in a grid
| selector | book-grid-view |
| templateUrl | ./grid-view.component.html |
books
|
Array of all the books displayed in this component This input property is passed down from the parent BookListComponent to this component.
Type: |
constructor(router: Router, route: ActivatedRoute)
|
| loadBookDetails |
loadBookDetails(book: Book)
|
|
Routes the app to the page displaying the details of the selected book This is the handler that reacts to the
Parameters :
Returns :
void
|
import { Component, Input } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
import { Book } from "app/models/book.model";
/**
* Component that displays all the books arranged in a grid
*/
@Component({
selector: 'book-grid-view',
templateUrl: './grid-view.component.html'
})
export class GridViewComponent {
/**
* Array of all the books displayed in this component
*
* This input property is passed down from the parent {@link BookListComponent}
* to this component.
*/
@Input() books: Book[];
constructor(private router: Router, private route: ActivatedRoute) { }
/**
* Routes the app to the page displaying the details of the selected book
*
* This is the handler that reacts to the `bookSelected` event
* passed up from the child component {@link GridItemComponent}.
*
* @param {Book} book the book that was selected in the grid
*/
loadBookDetails(book: Book) {
this.router.navigate([book.product.skuId], {relativeTo: this.route});
}
}
<div class="row">
<!-- ng-container is a logical way to group elements; it is not placed in the DOM -->
<!-- see here: https://angular.io/guide/structural-directives#ng-container-to-the-rescue -->
<!-- the string assigned to *ngFor is a microsyntax that lets you pick out other values like the zero-based index of the iteration -->
<!-- see here: https://angular.io/guide/template-syntax#ngfor-with-index -->
<ng-container *ngFor="let book of books; let i = index">
<!-- BOOTSTRAP'S GRID SYSTEM - see here: http://getbootstrap.com/css/#grid -->
<!-- on small devices ("sm"), each grid item will occupy 6 cols - as there are 12 cols in total, up to 2 items can fit on a line -->
<!-- on devices sized medium and larger, each item will occupy 4 cols, so there can be up to 3 items on a line -->
<!-- in either case if there are more items than can fit on one line, they will wrap onto the next line -->
<div class="col-sm-6 col-md-4">
<book-grid-item
[book]="book"
(bookSelected)="loadBookDetails($event)">
</book-grid-item>
</div>
<!-- BOOTSTRAP'S RESPONSIVE COLUMN RESETS, see here: http://getbootstrap.com/css/#grid-responsive-resets -->
<!-- if the grid items are of uneven height, we have to make sure that the items starting at each new line clear those above them -->
<!-- this block will be visible only on sm devices, this must be placed after every 2 items as that's how many items/line we'll have on sm devices -->
<div class="clearfix visible-sm-block"
*ngIf="(i+1) % 2 == 0">
</div>
<!-- this block will be visible only on md & lg devices, this must be placed after every 3 items as that's how many items/line we'll have on those devices -->
<div class="clearfix visible-md-block visible-lg-block"
*ngIf="(i+1) % 3 == 0">
</div>
</ng-container>
</div>