<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
import { NavController, NavParams } from 'ionic-angular/index';
import { Page1 } from 'page1.ts'
import { Component } from "@angular/core";
@Component({
templateUrl:"home.html"
})
export class HomePage {
blue: any;
green: any;
red: any;
theme: any;
constructor(private nav: NavController, public params: NavParams) {
this.theme = params.data.color;
this.blue = false;
this.green = false;
this.red = false;
switch (this.theme) {
case "danger":
this.red = true;
break;
case "secondary":
this.green = true;
default:
this.blue = true
break;
}
}
}
SCROLL-CONTENT {
overflow-y: auto !important;
}
CODE {
background: #EFEFEF;
}
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { Component } from "@angular/core";
import { ionicBootstrap, Platform } from 'ionic-angular/index';
import { HomePage } from './home.ts';
import { TabsPage } from './tabs.ts';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
constructor(private platform: Platform) {
this.rootPage = TabsPage;
}
}
ionicBootstrap(MyApp, [], {
tabbarPlacement: "bottom"
});
<ion-header>
<ion-navbar [attr.primary]="blue ? '' : null" [attr.secondary]="green ? '' : null" [attr.danger]="red ? '' : null">
<ion-title>
Dynamic Navbar
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1> Dynamically Change Navbar Color by Tabs</h1>
<button [color]="theme">I change too!</button>
</div>
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import { Component } from "@angular/core";
import {HomePage} from './home.ts';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
redParams = {
color: "danger"
};
greenParams = {
color: "secondary"
};
blueParams = {
color: "primary"
};
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = HomePage;
tab3Root: any = HomePage;
}
<ion-tabs>
<ion-tab [root]="tab1Root" [rootParams]="redParams" tabTitle="Red"></ion-tab>
<ion-tab [root]="tab2Root" [rootParams]="blueParams" tabTitle="Blue"></ion-tab>
<ion-tab [root]="tab3Root" [rootParams]="greenParams" tabTitle="Green" ></ion-tab>
</ion-tabs>