Angular2: Error in inline template

Question

I'm passing a component as a directive into another component to use in that component's template like so, but I am getting an Error in inline template , which is pretty vague, but it's pointing me to the directive. So I'm no sure if I'm instantiating it correctly in the actually component itself.

message-list.ts

import {Component, Input} from '@angular/core';
import {Message} from './message';
import {MessageModal} from './message';

@Component({
  selector: 'message-list',
  template: require('./message-list.html'),
  styles: [require('./message-list.css')],
  directives: [MessageModal]
})

export class MessageList {
  @Input()
  messages: Message[];
}

message-list.html

<div class="messages">
  <table class="table table-striped" style="width:75%">
    <tr *ngFor="let item of messages">
      <td><message-modal messageInput="{{item.message}}"></message-modal></td>
    </tr>
  </table>
</div>

MessageModal takes an input, messageInput , and message is also property of Message . The error is in line 4 of message-list.html with the <message-modal> directive. What's going on here?

Answer 1

you are taking messageInput as input of message-modal and you are getting in the .ts file via @Input messages make some changes like this :-

<div class="messages">
  <table class="table table-striped" style="width:75%">
    <tr *ngFor="let item of messages">
      <td><message-modal [messageInput]="item.message"></message-modal></td>
    </tr>
  </table>
</div>


export class MessageList {
  @Input() messageInput: any
  messages: Message[];
  constructor(){
   console.log(this.messageInput);
  }
}

For more Refer you can see here working example of @input

Working Example of @Input

Answer 2

Problem is with your @Input property. MessageList component doesn't have any input from its parent. But message-modal has from its parent called MessageList . So there is no point of using @Input in MessageList .

export class MessageList {
  @Input()                    
// dont require as its parent doesn't send any data I guess.

  messages: Message[];        
// dont require.still as you are using messages as an array I don't know how'd you get its value.
}

This below code would be required later,

export class MessageModal{ 
  @Input() messageInput: any;
}