I get a color string from my server and will change the ion-navbar background navbar dynamically. How can I set the navbar bg color to the color from the variable string?
I know it is possible with fixed defined colors in the variables.scss but I just get the color string e.g. '#00000' from the server so that I cant add it to the variable.scss before.
I tired something like that:
<ion-header>
<team-header [teamColor]="team.teamColor"></team-header>
</ion-header>
-------- header.ts ---------------
#Component({
selector: 'team-header',
templateUrl: 'teamheader.html'
})
export class TeamheaderComponent {
#Input() teamColor;
constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
}
-------- teamheader.html----------- ------------------
<ion-navbar [style.background-color]="teamColor">
...
</ion-navbar>
But it doesnt work.
How can I change the color dynamically?
Maybe it's not the best solution, but it worked for me when I changed the property backgroundcolor of the title class.
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
home.ts
import { Component, ElementRef } from '#angular/core';
import { NavController, Platform } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
public platform: Platform,
public element: ElementRef) {
this.platform.ready().then(() => {
let el = this.element.nativeElement
el = document.getElementsByClassName("title")[0]
el.style.background = 'red';
})
}
}
This seems far from ideal, I would not suggest using server-side code to determine your styling, but in any case, you could try
<ion-header>
<team-header [color]="teamColor"></team-header>
</ion-header>
Related
I've written a custom component to handle my ion-header as all I need to change per page is the title. However, the title is not displaying as the component doesn't seem to be getting the property from the app page.
Component Template
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title> {{title}} </ion-title>
Component Typescript
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-custom-toolbar',
templateUrl: './custom-toolbar.component.html',
styleUrls: ['./custom-toolbar.component.scss'],
})
export class CustomToolbarComponent implements OnInit {
#Input() title: any;
constructor() { }
ngOnInit() {
}
}
App Page Template
<app-custom-toolbar [title]="Dashboard"></app-custom-toolbar>
You need to declare #Input() title in your custom component to pass value from parent into it like -
Child Component
...
...
#Input() title: any;
...
...
Parent Component HTML -
<child-component [title]="somePropertyInParentComponent"></child-component>
Edit: According to your updated question . Try removing [] from the title property in parent component
As Pawan Sharma says, you need to declare an #Input,
In this link you can find more information about it.
https://victorroblesweb.es/2016/11/07/input-output-angular-2/
Typescript
import { Component, OnInit, Input } from '#angular/core';
import { NavController } from '#ionic/angular';
#Component({
selector: 'app-footertoolbar',
templateUrl: './footertoolbar.page.html',
})
export class FooterToolbarPage implements OnInit {
#Input() public activeIndex:number;
constructor(private navCtrl: NavController) { }
ngOnInit() {}
public GoToPage() { console.log(this.activeIndex); }
}
HTML
<ion-toolbar color="dark">
<ion-buttons class="sidemargin" slot="secondary">
<ion-button (click)="GoToPage()"></ion-button>
</ion-buttons>
</ion-toolbar>
HTML of the component that use the component
<app-footertoolbar [activeIndex]="0" >
</app-footertoolbar>
Reposting my comment as requested:
I think if you have the [] around it then to pass a string back you would need "'dashboard'" (so a " with a ' inside it).
After setting back button text using config,
it does not reflect right away in nav bar.
Have to pop and push the page again.
playground:
https://stackblitz.com/edit/backbuttonbug.
you can see in contact page,
setting back button text does not reflect in self page and even in other nav stack
code:
previous page:
export class AboutPage {
constructor(public navCtrl: NavController) {}
contact() {
this.navCtrl.push(ContactPage);
}
}
Next page:
export class ContactPage {
constructor(public navCtrl: NavController,
public config: Config) {}
toChinese() {
this.config.set("backButtonText", '返回');
}
toEnglish() {
this.config.set("backButtonText", 'back');
}
}
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button (tap)="toChinese()">toChinese</button>
<button ion-button (tap)="toEnglish()">toEnglish</button>
</ion-content>
I suspect this is a bug and have opened a issue:
https://github.com/ionic-team/ionic-v3/issues/976.
and find another issue similar:
https://github.com/ionic-team/ionic/issues/7043
is that a ionic bug / my program bug?
hope to see advice
You haven't added any code so I'm not 100% sure of what you've tried already but try this:
import { ViewController } from 'ionic-angular';
...
ionViewDidEnter() {
this.viewCtrl.setBackButtonText('Some dynamic button text');
}
Edit
Sorry didn't see your Stackblitz example, this works:
import { Component } from '#angular/core';
import { NavController, Config, ViewController } from 'ionic-angular';
#Component({
selector: 'page-contact',
templateUrl: 'contact.html'
})
export class ContactPage {
constructor(public navCtrl: NavController,
public config: Config,
private viewCtrl: ViewController) {
}
toChinese() {
this.viewCtrl.setBackButtonText('返回');
}
toEnglish() {
this.viewCtrl.setBackButtonText('Back');
}
}
I am using Ionic and Firebase. I have created firebase project, clicked on icon to "add fire to your android app" and followed the steps.
Foll. is code on my html page:
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
Firebase Analytics
<p>
Click the button to log a custom event
</p>
<button ion-button full (click)="logClick()">Log event</button>
</ion-content>
Below code is on the ts of this page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { EventLoggerProvider } from '../../providers/event-logger/event-logger';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController,
public logger: EventLoggerProvider) {
}
logClick() {
this.logger.logButton('homeButton',{ pram: "paramValue" })
}
}
Foll. code is in the provider:
import { HttpClient } from '#angular/common/http';
import { Injectable } from '#angular/core';
import { FirebaseAnalytics } from '#ionic-native/firebase-analytics';
#Injectable()
export class EventLoggerProvider {
constructor(public fba: FirebaseAnalytics) {
console.log('Hello EventLoggerProvider Provider');
}
logButton(name:string,value:any){
this.fba.logEvent(name, { pram:value })
.then((res: any) => {console.log(res);})
.catch((error: any) => console.error(error));
}
}
I ran "ionic cordova run android" and launched the app on mobile device and everything seems to be OK. However, when I do "ionic serve", the page loads OK in the browser, but when I click the button, what could have caused it to give the foll. error?
Ionic - Runtime Error this.fba.logEvent(...).then is not a function
Now its more clear after seing the code.
import { FirebaseAnalytics } from '#ionic-native/firebase-analytics';
#ionic-native functions only work on the real device or simulator. Otherwise, it will give an error.
i am new to ionic and recently i tried to create a shared component so that i can sort of remove duplicate coding of same content on different page. It consist of a notification bar and a panel that have a login/signup button. I am able to display the notification bar and the login panel on pages that i want but i am unable to call the function of the login/signup button.
Whenever i click the login/signup button, it will said presentLoginModal() is not a function. Below are my code.
Hope someone can advice me on this. Thanks.
shared.module.ts
import {NgModule} from '#angular/core';
import {IonicPageModule} from 'ionic-angular';
import {NotificationComponent} from '../notification/notification';
import {NonLoginComponent} from '../nonlogin/nonlogin';
#NgModule({
imports: [IonicPageModule.forChild(NotificationComponent),IonicPageModule.forChild(NonLoginComponent)],
declarations: [NotificationComponent, NonLoginComponent],
exports: [NotificationComponent, NonLoginComponent]
}) export class SharedModule {}
nonlogin.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Login} from '../login/login';
import {Register} from '../register/register'
#IonicPage()
#Component({
selector: 'app-nonlogin',
templateUrl: './nonlogin.html'
})
export class NonLoginComponent {
constructor(public navCtrl: NavController) {}
presentLoginModal() {
let loginModal = this.modalCtrl.create(Login, {showBackdrop: true, enableBackdropDismiss: true},{cssClass: 'logon'});
loginModal.present();
}
presentRegisterModal(){
let registerModal = this.modalCtrl.create(Register, {showBackdrop: true, enableBackdropDismiss: true},{cssClass: 'register'});
registerModal.present();
}
}
notification.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'app-notification',
templateUrl: './notification.html'
})
export class NotificationComponent {
constructor(public navCtrl: NavController) {}
}
nonlogin.html
<div class="toppanel"><div class="leftside"><img class="companylogo"
src="../../assets/imgs/logo.jpg"></div><div class="rightside">
<button tappable class="login" ion-button
(click)="presentLoginModal()">LOG IN</button><button tappable
class="signup" ion-button (click)="presentRegisterModal()">SIGN
UP</button></div></div>
home.html
<ion-content>
<app-notification></app-notification>
<app-nonlogin></app-nonlogin>
</ion-content>
I have an app running on ionic 2, but I upgraded it to ionic 3 and after upgrading, some ionic plugins do not work, as is the case with the LoadingController and even the Platform.
generating the error "Cannot find name 'LoadingController'".
I looked at the ionic doc and did not figure out how to import them now
Follow my code:
import { LoadingController, Platform } from 'ionic-angular'
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [ ProfileService, AlertService ]
})
export class AppComponent {
constructor(private router: Router,
public loadingCtrl: LoadingController,
private activatedRoute: ActivatedRoute,
private loginService: LoginService,
private profileService: ProfileService,
private _alertService: AlertService,
private platform: Platform ) {
router.events.subscribe((data) => {
this.path = data.url.substr(1);
})
this.getUserName();
this.platform.ready().then(() => {
this.platform.registerBackButtonAction(() => {
history.go(-1)
});
});
}}
LoadingController
ionic 3 loadingController link
home.html
<ion-header>
<ion-navbar>
<ion-title>Loading</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="loading()">Show Loading</button>
</ion-content>
home.ts
import { LoadingController } from 'ionic-angular';
export class LoadingPage {
constructor(public navCtrl: NavController,public loadingCtrl: LoadingController) {
}
loading(){
let load = this.loadingCtrl.create({
content:'Please Wait....',
duration: 3000
});
load.present();
}
}