CODEWITHSUNDEEP
angularionic2
Caner Balım
Caner Balım

Reputation: 556

Ionic 2 - Custom Component @Input not Working Correctly

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.

Upvotes: 1

Views: 4064

Answers (1)

yurzui
yurzui

Reputation: 214017

I guess it should be

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

or

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

See also

Upvotes: 4

Related Questions