0

I have the 3 components shown below:

news-feed.component

user-activity-item.component

user-activity-list.component

Both user-activity components are in a sub directory of news-feed component. Also, the user-activity item, is just a member of the user-activity-list.

Everything with this works, until I add the component selector cg-user-activity-list to the news-feed.component.html file.

Once I add that line, the route that I navigate to, shows the text in the news-feed.component.html, but the activity list never shows. Also, for some reason, the route in the URL bar quickly shows, like it successfully made it to the page, then goes back to the previous route (but stays on the page I intended).

I'm pretty new to Angular2, so I'm hoping that someone will immediately spot my mistake, but I've been looking at this a few hours, and haven't been able to see the problem.

Here's my files:

news-feed.component.ts

import { Component, OnInit } from '@angular/core';
import { UserActivityListComponent } from './user-activity-list/user-activity-list.component';

@Component({
  selector: 'cg-news-feed',
  templateUrl: './news-feed.component.html',
  styleUrls: ['./news-feed.component.css']
})
export class NewsFeedComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

news-feed.component.html

<div class="pure-u-1">
    Activity Test Text
    <cg-user-activity-list></cg-user-activity-list>
</div>

user-activity.item.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { UserActivity } from '../user-activity';

@Component({
  selector: 'cg-user-activity-item',
  templateUrl: './user-activity-item.component.html'
})
export class UserActivityItemComponent implements OnInit {
  @Input() userActivity: UserActivity;

  constructor() { }

  ngOnInit() {
  }

}

user-activity.item.component.html

<div class="pure-u-1">
    testing user activity item component
    <h4>{{userActivity.name}}</h4>
    <p>{{userActivity.id}}</p>
</div>

user-activity.list.component.ts

import { Component, OnInit } from '@angular/core';
import { UserActivity } from '../user-activity';
//import { UserActivityItemComponent } from './user-activity-item.component';

@Component({
  selector: 'cg-user-activity-list',
  templateUrl: './user-activity-list.component.html'
})
export class UserActivityListComponent implements OnInit {
  userActivities: UserActivity[] = [];
  userActivity = new UserActivity('John', '25');

  constructor() { }

  ngOnInit() {
  }

}

user-activity.list.component.html

<div class="pure-u-1">
  testing user activity list component
  <cg-user-activity-item> [userActivity]="userActivity" </cg-user-activity-item>
</div>

If I need to post more information on the project, I can, but it's fairly large, so I wasn't 100% sure what I'd need to post for someone to see the problem.

Additional Info.

trueCamelType
  • 2,198
  • 5
  • 39
  • 76

1 Answers1

2

Your last code piece. I believe that's the issue.

user-activity.list.component.html

<div class="pure-u-1">
  testing user activity list component
  <cg-user-activity-item> [userActivity]="userActivity" </cg-user-activity-item>
</div>

Should be:

<cg-user-activity-item [userActivity]="userActivity"></cg-user-activity-item>

I might be wrong, pretty hard to tell what's wrong. If you could add the error from the console that would be nice.

Edit

It appears that your userActivity is not loaded yet, try:

<div class="pure-u-1">
    testing user activity item component
    <h4>{{userActivity?.name}}</h4>
    <p>{{userActivity?.id}}</p>
</div>

Or you can just add *ngIf="userActivity" to your div

penleychan
  • 5,370
  • 1
  • 17
  • 28
  • I can't believe I didn't include the Console error. I'll Edit the question, and add it to the end. That doesn't appear to be my issue though. – trueCamelType Jan 16 '17 at 06:41
  • Your edit, fixed the routing. My data still isn't showing up, and there are no console errors. I'll mark this as the correct answer. I bet I'll have a much easier time troubleshooting now that that issue is taken care of. If you have any advice on why the userActivity?.name, and id aren't showing, that would be appreciated too. – trueCamelType Jan 16 '17 at 06:55
  • 1
    I'll try to create an empty project with the code you posted above and see. I'll let you know. – penleychan Jan 16 '17 at 07:00
  • 1
    @trueCamelType Seems working for me, same code as above see my github https://github.com/penleychan/so-help-user-activity , if you do a console.log(userActivity); on ngOnInit() for UserActivityItemComponent, what does it return? It could also be possible your UserActivity object have different property? Like capital 'Name' and 'Id' instead of 'name' and 'id'. – penleychan Jan 16 '17 at 07:30
  • The name and id are coming from a class ```export class UserActivity { constructor(public name: string, public id: string) {}; }``` . The console output of the console log is "undefined" – trueCamelType Jan 16 '17 at 07:37
  • 1
    @trueCamelType :( I tried using your UserActivity can't replicate it, not sure how much help I can provide now. Unless you are comfortable putting your project in a repo, then I can take a further look into it tomorrow. – penleychan Jan 16 '17 at 07:51
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133284/discussion-between-truecameltype-and-12seconds). – trueCamelType Jan 16 '17 at 15:53
  • For anyone who finds this later, I had removed the solution from his first solution. If I implement everything the way 12seconds suggests, it all works fine. – trueCamelType Jan 16 '17 at 17:30