|
@@ -408,9 +408,7 @@ Modify `beer.html` to show the list of beers.
|
408
|
408
|
<ion-content padding>
|
409
|
409
|
<ion-list>
|
410
|
410
|
<ion-item *ngFor="let beer of beers" >
|
411
|
|
- <ion-item>
|
412
|
|
- <h2>{{beer.name}}</h2>
|
413
|
|
- </ion-item>
|
|
411
|
+ <h2>{{beer.name}}</h2>
|
414
|
412
|
</ion-item>
|
415
|
413
|
</ion-list>
|
416
|
414
|
</ion-content>
|
|
@@ -542,11 +540,11 @@ export class BeerPage {
|
542
|
540
|
Update `beer.html` to display the image retrieved:
|
543
|
541
|
|
544
|
542
|
```html
|
545
|
|
-<ion-item>
|
546
|
|
- <ion-avatar item-left>
|
547
|
|
- <img src="{{beer.giphyUrl}}">
|
548
|
|
- </ion-avatar>
|
549
|
|
- <h2>{{beer.name}}</h2>
|
|
543
|
+<ion-item *ngFor="let beer of beers">
|
|
544
|
+ <ion-avatar item-left>
|
|
545
|
+ <img src="{{beer.giphyUrl}}">
|
|
546
|
+ </ion-avatar>
|
|
547
|
+ <h2>{{beer.name}}</h2>
|
550
|
548
|
</ion-item>
|
551
|
549
|
```
|
552
|
550
|
|
|
@@ -576,12 +574,14 @@ Change the header in `beer.html` to have a button that opens a modal to add a ne
|
576
|
574
|
In this same file, change `<ion-item>` to have a click handler for opening the modal for the current item.
|
577
|
575
|
|
578
|
576
|
```html
|
579
|
|
-<ion-item (click)="openModal({id: beer.id})">
|
|
577
|
+<ion-item *ngFor="let beer of beers" (click)="openModal({id: beer.id})">
|
580
|
578
|
```
|
581
|
579
|
|
582
|
580
|
Add `ModalController` as a dependency in `BeerPage` and add an `openModal()` method.
|
583
|
581
|
|
584
|
582
|
```typescript
|
|
583
|
+import { ModalController } from 'ionic-angular';
|
|
584
|
+
|
585
|
585
|
export class BeerPage {
|
586
|
586
|
private beers: Array<any>;
|
587
|
587
|
|
|
@@ -589,7 +589,7 @@ export class BeerPage {
|
589
|
589
|
public modalCtrl: ModalController) {
|
590
|
590
|
}
|
591
|
591
|
|
592
|
|
- // ionViewDidLoad method
|
|
592
|
+ // ionViewDidLoad()
|
593
|
593
|
|
594
|
594
|
openModal(beerId) {
|
595
|
595
|
let modal = this.modalCtrl.create(BeerModalPage, beerId);
|
|
@@ -723,6 +723,13 @@ save(beer: any): Observable<any> {
|
723
|
723
|
}
|
724
|
724
|
```
|
725
|
725
|
|
|
726
|
+This won't work because `/beers` is not an auto-authorized URI. To fix this, add this URI as to the StormpathConfiguration in `src/app/app.module.ts`.
|
|
727
|
+
|
|
728
|
+```typescript
|
|
729
|
+spConfig.autoAuthorizedUris.push(new RegExp('http://localhost:8080/good-beers'));
|
|
730
|
+spConfig.autoAuthorizedUris.push(new RegExp('http://localhost:8080/beers'));
|
|
731
|
+```
|
|
732
|
+
|
726
|
733
|
### Add Swipe to Delete
|
727
|
734
|
|
728
|
735
|
To add swipe-to-delete functionality on the list of beers, open `beer.html` and make it so `<ion-item-sliding>` wraps `<ion-item>` and contains the `*ngFor`. Add a delete button using `<ion-item-options>`.
|