Ionic 4 pass property to custom component - ionic-framework

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

ionic back button does not change text dynamically

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');
}
}

Ionic - Runtime Error this.fba.logEvent(...).then is not a function

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.

Ionic navbar color dynamically

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>

Multiple component in shared.module.ts Ionic

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>

How to create a custom form component by extending BaseInput in ionic2

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>