Using @Input decorator to pass data from outside the angular component

In an ionic app, i am using a angular component. In that angular component, i have a variable headerText which in initialized from the page where this component is used.

Problem is that headerText variable is always undefined.

How can i fix this problem?

This is the angular component where headerText variable is defined.

import { Component, Input, OnInit } from '@angular/core';
import { MenuController, NavController } from 'ionic-angular';

@Component({
  selector: 'custom-header-text',
  templateUrl: 'custom-header-text.html'
})
export class CustomHeaderTextComponent implements OnInit {

  @Input() headerText: string;

  constructor(private navCtrl :  NavController,
              private menuCtrl : MenuController) {

  }

  ngOnInit() {
    setTimeout(() => {
      console.log('text = ' + this.headerText);
    }, 3000);
  }

  goBack() {
    this.navCtrl.pop();
  }

  openMenuPage() {
    this.menuCtrl.enable(true,'bl-menu')
    this.menuCtrl.open();
  }
}

This is how i am passing a value to this headerText variable from where this component is used.

<custom-header-text [headerText]="'Inbox'"></custom-header-text>