Passing data from components in Angular 2 - node.js

Question

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">{{user.name}}</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">{{user.name}}</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">{{user.name}}</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>{{message.createdBy}}</strong> {{message.subject}} <strong>{{message.dateCreated}}</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>{{message.recipients}}</strong> {{message.subject}} <strong>{{message.dateCreated}}</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>{{messages.subject}}</p>
This is my component structure

Answer 1

So it looks like a couple of things:
You need to include the id or message in here this.router.navigate(['/message', ]); which is looks like you may have missed adding it in there
You need to specify the path in your router like this { path: 'message/:id', component: MessageComponent }
You can retrieve what is passed in by getting it from the params using something like this:
this.message = this.route.params.subscribe(params => {
this.id = params['id'];
});