Ionic 2 - Custom Component @Input not Working Correctly

Question

I use Ionic 2 Rc2. I want to create custom navbar for all pages in my application. This navbar's title must change according to pages. I created navbar.ts and navbar.html . My application works with no error.

if I use <navbar [pageTitle]="1" ></navbar> in home.html, pageTitle setted as 1. But if I use <navbar [pageTitle]="home page" ></navbar> in home.html, pageTitle's result undefined.

Navbar.ts

import { Component,Input } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'navbar',
  templateUrl: 'navbar.html'
})

export class CustomNavbar {

@Input() 
public pageTitle : string;

  constructor(public navCtrl: NavController) {
        console.log(this.pageTitle);
  }

}

navbar.html

<ion-header>
   <ion-toolbar color="primary" no-border-bottom>
    <ion-buttons left>
      <button ion-button>
        <ion-icon name="contact"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title  >{{pageTitle}}</ion-title>
    <ion-buttons right>
      <button ion-button>
        <ion-icon name="options"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

home.html

<navbar [pageTitle]="Home Page" ></navbar>

<ion-content padding>
welcome


</ion-content>

this case pageTitle returns undefined. Any Solution ? Thanks.

I think you are calling it inside constructor fn that's why it's value is undefined. call it inside ngOnInit(){} — Manish
– Manish, Commented Nov 6, 2016 at 15:22
is it undefined in rendered template or just in console.log? — Sefa
– Sefa, Commented Nov 6, 2016 at 15:25
console.log 's result undefined and Page title does not appear in rendered template — Caner Balım
– Caner Balım, Commented Nov 6, 2016 at 15:30
Angular binds inputs at ngOnInit function. If you console.log in ngOnInit function, you will be able to see the value. I made a research about ion-title element but couln't find anything. Are you sure that that element exists? If so please provide or check it's own documentation to see if providing input ot initialization is required or not. — Sefa
– Sefa, Commented Nov 6, 2016 at 15:34
@CanerBalım: this might help a little, I created a plunker using your code base (see src/app.ts and src/navbar.ts). Two things will emerge from that, logging the value in the constructor will return null even if everything is working as expected. Also it seems like the input isn't taking strings... no idea why, if you change "Home Page" to a numeric value it works. Here is the example. I unfortunately don't know why it is only allowing numbers. Maybe someone else here knows why? — Dan Simon
– Dan Simon, Commented Nov 6, 2016 at 17:01

Community · Accepted Answer · 2017-05-23 11:54:15Z

4

I guess it should be

<navbar [pageTitle]="'Home Page'"></navbar>

or

<navbar pageTitle="Home Page" ></navbar>

Collectives™ on Stack Overflow

Ionic 2 - Custom Component @Input not Working Correctly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related