Passing data from components in Angular 2

My objective is when the user clicks a message displayed on /messages, it redirects them to /message with the messages displayed information. Please direct me in the right direction if I'm doing something wrong.

This is my error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'messages' since it isn't a known property of 'message'. ("ge-header"></h2>
  <ul class="list-group" style="list-style-type: none;">
    <message [ERROR ->][messages]="message"></message>
    Inbox: <ul class="list-group" style="list-style-type: none;">
   "): MessagesComponent@3:13
'message' is not a known element:
1. If 'message' is an Angular component, then verify that it is part of this module.
2. If 'message' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("class="page-header"></h2>
  <ul class="list-group" style="list-style-type: none;">
    [ERROR ->]<message [messages]="message"></message>
    Inbox: <ul class="list-group" style="list-style-type: no"): MessagesComponent@3:4 ; Zone: <root> ; Task: Promise.then ; Value: 

Messages Component:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
  messages: Object;
  username: String;
  user: Object;
  messageID: String;
  public UserList: Object;
  public RecpList: Object;

  constructor(private authService: AuthService,
    private router: Router
    ) { }

  ngOnInit() {
    this.authService.getProfile().subscribe(profile => {
      this.user = profile.user;
      this.username = profile.user.username;
    },
    err => {
      console.log(err);
      return false;
    });

    this.authService.getMessages(this.username).subscribe(list => {
        this.UserList = list.UserList;
        this.RecpList = list.RecpList;
    },
    err => {
      console.log(err);
      return false;
    });
  }

  onMessageClick(messageID){
    this.authService.getMessage(this.user, messageID).subscribe(list => {
      console.log(list);
      this.router.navigate(['/message', ]);
    });

  }
}

Messages html:

<div *ngIf="user">
  <h2 class="page-header"></h2>
  <ul class="list-group" style="list-style-type: none;">
    <message [messages]="message"></message>
    Inbox: <ul class="list-group" style="list-style-type: none;">
      <li *ngFor="let message of RecpList" (click)="onMessageClick(message.messageID)" class="list-group" style="text-align: center;"><strong></strong>  <strong></strong></li>
    </ul>
    Sent: <ul class="list-group" style="list-style-type: none;">
      <li *ngFor="let message of UserList" (click)="onMessageClick(message.messageID)" class="list-group" style="text-align: center;"><strong></strong>  <strong></strong></li>
    </ul>
  <li class="list-group"><a [routerLink] = "['/newmessage']">New Message</a></li>
  </ul>
</div>

Message Component:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css'],
  inputs: ['messages']
})
export class MessageComponent implements OnInit {
messages: Object;
user: Object;
createdBy: String;
recipients: String;
subject: String;
message: String;
previousMessage: String;
nextMessage: String;

  constructor(private authService: AuthService,
    private router: Router) { }

  ngOnInit() {
    this.authService.getProfile().subscribe(profile => {
      this.user = profile.user;
    },
    err => {
      console.log(err);
      return false;
    });
  }



}

Message html:

<p></p>

This is my component structure

via A. Angee