Component Not Receiving Values from @Input() - Ionic 2

Question

So I'm working on a communication app, and I want a collection of messages to be passed into the twine-message component from the twine-messages component. Below are the implementations of both files.

twine-messages:

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({
      selector: 'twine-messages',
      template: `
            <ion-content>
                  <twine-message *ngFor="let message of messages;"
                        name="{{message.name}}"
                        user="{{message.user}}"
                        type="{{message.type}}"
                        messages="{{message.messages}}"
                        time="{{message.time}}">
                  </twine-message>
            </ion-content>
      `
})

export class MessagesComponent {
      messages: any = [
            {
                  name: "Peter Parker",
                  user: "user5",
                  type: "twiner",
                  messages: [
                        "Hey guys! You both get 3 hours of sleep so I thought you might like each other's company!"
                  ],
                  time: "3:00pm"
            },
            {
                  name: "",
                  user: "user2",
                  type: "time",
                  messages: [],
                  time: "7:15pm"
            },
            {
                  name: "Vikki",
                  user: "user6",
                  type: "twinee",
                  messages: [
                        "Hi! How are ya?"
                  ],
                  time: "7:15pm"
            },
            {
                  name: "You",
                  user: "user2",
                  type: "user",
                  messages: [
                        "I'm great! So, how'd you meet Peter?"
                  ],
                  time: "7:16pm"
            }
      ];
      @ViewChild('searchbar') searchBar;

      ionViewDidLoad () {
            this.searchBar.setFocus();
      }
}

twine-message:

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

@Component({
      selector: 'twine-message',
      template: `
            <div class="center">
                  <img src="templates/{{user}}.png" alt="{{name}}"/>
                  <h3>{{name}}</h3>
                  <ion-card *ngFor="let message of messages">
                        <ion-grid>
                              <p>{{message}}</p>
                        </ion-grid>
                  </ion-card>
            </div>
      `
})

export class MessageComponent {
      @Input() public name: string;
      @Input() public user: string;
      @Input() public time: string;
      @Input() public type: string;
      @Input() public messages: any;
}

My issue is that when I run this code, the @Input() values are undefined. For instance, I receive this error when trying to load an image using the user variable: GET http://localhost:8100/templates/.png 404 (Not Found). I scoured every single StackOverflow, GitHub, and Ionic 2 Support solution, and have had no luck. Does anyone have an idea how to solve this issue? Thank you!

name, user, type, messages, and time should each be in brackets in your html template. Is this just a typo? — Dan Simon
They are not supposed to be in brackets. It causes an interpolation error. Got interpolation ({{}}) where expression was expected at column 0 in [{{message.name}}] in MessagesComponent@14:24 If you were to use brackets, you have to remove the templating braces from the variables, but this does not resolve the issue. — Anthony Krivonos
Ah didn't notice the brackets, I don't think those are needed, I think you need something like this [user]="message.user" — Dan Simon

Aravind Aravind · Accepted Answer · 2017-03-12T01:07:22

You should use property bindings

<twine-message *ngFor="let message of messages;"
                        [name]="message.name"
                        [user=]"message.user"
                        [type]="message.type"
                        [messages]="message.messages"
                        [time]="message.time">
</twine-message>

Component Not Receiving Values from @Input() - Ionic 2

1 Answers