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

Question

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>

Can you replicate this issue with a [Sample StackBlitz](https://stackblitz.com/fork/ionic)? — SiddAjmera, Oct 15 '18 at 16:35
Are you calling the custom-header-text selector in index.html or your root element? — Marshal, Oct 15 '18 at 16:52
@Marshal i am using custom-header-text selector in an ionic page. — , Oct 15 '18 at 16:54
Is the ionic page the root element? meaning is the first thing called by the browser in your project? Sorry I am not familiar with ionic — Marshal, Oct 15 '18 at 16:55
@SiddAjmera i have posted my relevant code [here](https://stackblitz.com/edit/ionic-3mhutq?file=pages%2Fhome%2Fhome.ts) but i couldn't fix couple of broken imports but hopefully you will get an idea of what i am doing wrong here. — , Oct 15 '18 at 16:56
@Marshal Yes it is the root page. But after setting another page as root page and then opening this page from there, problem was solved. Any idea why root page was the issue? — , Oct 15 '18 at 16:59

score 1 · Accepted Answer · answered Oct 15 '18 at 17:01

1

See below.

The reason why this is not working is that your root element in which you place the <custom-header-text [headerText]="'Inbox'"></custom-header-text> is not an angular component. Because of this, Angular won't compile this element. And Angular does not read attribute values during runtime, only during compile time, as otherwise we would get a performance hit.

Answered here

Angular 2 input parameters on root directive

answered Oct 15 '18 at 17:01

Marshal

10,499
2
34
53

So that means i cannot pass data to the angular component in this way from the root element in ionic? – Oct 15 '18 at 17:16
There is an example in the linked answer that shows how to get string values, you could possibly use that here as you want a string let prop = eltRef.getAttribute('headerText'); but anything beyond a string value I believe you will not be able to. I ran into this in my project doing a browser check, I will keep looking to see if there is a way for data beyond a string but getAttribute should work for your string. – Marshal Oct 15 '18 at 17:19

score 0 · Answer 2 · answered Oct 15 '18 at 17:00

0

Your code wasn't working as the HeaderModule was not correctly configured.

There were a few issues with your implementation:

The path to the Header Module wasn't correctly set in AppModule.
The path to the HeaderComponent template was also not set to the correct HTML file.

After fixing those, it was working as expected. Here's an Updated StackBlitz for your ref.

answered Oct 15 '18 at 17:00

SiddAjmera

38,129
5
72
110

yes, i couldn't set the correct paths to files on Stackblitz but in my project on my pc, paths are correctly configured, setting another page as root page fixed this issue. – Oct 15 '18 at 17:06

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

2 Answers2