|
@@ -382,8 +382,7 @@ Modify `beer.html` to
|
382
|
382
|
</ion-content>
|
383
|
383
|
```
|
384
|
384
|
|
385
|
|
-
|
386
|
|
-Modify `beer.ts` to
|
|
385
|
+Modify `beer.ts` to be
|
387
|
386
|
|
388
|
387
|
```typescript
|
389
|
388
|
import { Component } from '@angular/core';
|
|
@@ -408,6 +407,44 @@ export class BeerPage {
|
408
|
407
|
}
|
409
|
408
|
```
|
410
|
409
|
|
|
410
|
+To expose this page on the tab bar, add it to `tabs.ts`
|
|
411
|
+
|
|
412
|
+```typescript
|
|
413
|
+import { Component } from '@angular/core';
|
|
414
|
+
|
|
415
|
+import { HomePage } from '../home/home';
|
|
416
|
+import { AboutPage } from '../about/about';
|
|
417
|
+import { ContactPage } from '../contact/contact';
|
|
418
|
+import { BeerPage } from '../beer/beer';
|
|
419
|
+
|
|
420
|
+@Component({
|
|
421
|
+ templateUrl: 'tabs.html'
|
|
422
|
+})
|
|
423
|
+export class TabsPage {
|
|
424
|
+ // this tells the tabs component which Pages
|
|
425
|
+ // should be each tab's root Page
|
|
426
|
+ tab1Root: any = HomePage;
|
|
427
|
+ tab2Root: any = BeerPage;
|
|
428
|
+ tab3Root: any = ContactPage;
|
|
429
|
+ tab4Root: any = AboutPage;
|
|
430
|
+
|
|
431
|
+ constructor() {
|
|
432
|
+
|
|
433
|
+ }
|
|
434
|
+}
|
|
435
|
+```
|
|
436
|
+
|
|
437
|
+Update `tabs.html` too!
|
|
438
|
+
|
|
439
|
+```html
|
|
440
|
+<ion-tabs>
|
|
441
|
+ <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
|
|
442
|
+ <ion-tab [root]="tab2Root" tabTitle="Beer" tabIcon="beer"></ion-tab>
|
|
443
|
+ <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
|
|
444
|
+ <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
|
|
445
|
+</ion-tabs>
|
|
446
|
+```
|
|
447
|
+
|
411
|
448
|
Add some fun with Giphy! Run `ionic generate provider giphy-service`. Replace the code in `src/providers/giphy-service.ts` with the following TypeScript:
|
412
|
449
|
|
413
|
450
|
```typescript
|