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).
Related
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 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>
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 want to create a custom form input component in ionic2, by extending BaseInput. But it doesn't rendered, and I can't find it on the DOM.
import { Component, ElementRef, OnDestroy, Optional, Renderer,
ViewEncapsulation } from "#angular/core";
import { Config, Form, Item } from "ionic-angular";
import { BaseInput } from "ionic-angular/util/base-input";
import { NG_VALUE_ACCESSOR } from "#angular/forms";
#Component({
selector: 'my-checkbox',
template:
'<p>aaaaa</p>',
host: {
'[class.checkbox-disabled]': '_disabled'
},
providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: MyCheckboxComponent, multi: true } ],
encapsulation: ViewEncapsulation.None,
})
export class MyCheckboxComponent extends BaseInput<any> implements OnDestroy {
constructor(form: Form, config: Config, elementRef: ElementRef, renderer: Renderer, #Optional() item: Item) {
super(config, elementRef, renderer, 'my-checkbox', [], form, item, null);
}
}
The code is copy from src/component/checkbox/checkbox.ts and make a little changes.
I had the same problem. My component did not get render within <ion-item> parent element. I fixed it by adding item-content directive
<ion-item>
<ion-label>Label</ion-label>
<my-checkbox item-content></my-checkbox>
</ion-item>