Angular2 calling component within component with parameter

Question

I have a details page with comments. For single comment, I've created a @Component. Trick is, every comment can have child-comments.

Here's how my details.html looks like:

some info here...
<single-comment ngFor... [comment]="'hi comment'"></single-comment>

And the single-comment.html looks like:

<ion-item no-padding>
  <small dark>
    <strong>{{comment}}</strong>
  </small>
  <ng-content></ng-content>
  <single-comment [comment]="'ANOTHER comment'"></single-comment>
</ion-item>

The component itself:

@Component({
  selector: 'single-comment',
  templateUrl: 'single-comment.html'
})
export class SingleComment {
  @Input() comment: string;

  constructor() {
  }

  ngAfterContentInit() {
        console.log('new comment', this.comment);
  }
}

The thing is, 2nd aka. child-component never gets called.

I've also created a Plunkr code which better shows the example. Plunkr is visible here: https://plnkr.co/edit/w5kWE6QdbEoXIpqLI4dc?p=preview. The "details" page in plunkr example is home.html, which also holds the @Component itself.

Is this an Angular2 bug or is that kind of behavior not possible at all? My solution would be to show a nested comments, but since I'm unable to get 2nd comment to load, I'm kind of in an dead-end.

Is there a solution to this or just a better way to achieve what I'm trying to do?

Thank you all for helping.

So if I understand correctly you are currently trying to use the single-comment directive within the html that defines the single-comment directive? - That would mean that (if this were to succeed) you would be creating an infinite loop of comments that said "ANOTHER comment" — Jarod Moser, Jun 29 '16 at 20:17
Sounds like you are looking for something like http://stackoverflow.com/questions/37746516/use-component-in-itself/37747022#37747022 — Günter Zöchbauer, Jun 30 '16 at 05:28
@JarodMoser exactly. In this scenario, I would get an endless-loop. Adding a simple if statement in my template where I check if current comment has sub-comments, will solve this. — gregor, Jun 30 '16 at 05:57

Günter Zöchbauer · Accepted Answer · 2016-09-16T07:23:03.997

update

With the introduction of @NgModule and the migration of directives to @NgModule forwardRef shouldn't be necessary anymore.

original

If you want to use a component inside itself (recursive) you need to add it to providers like any other component or directive and because the @Component() decorator comes before the class and the class can not be referenced before it is declared you also need forwardRef

import {Component, forwardRef, Input} from '@angular/core'

@Component({
  selector: 'single-comment',
  templateUrl: 'single-comment.html',
  directives: [forwardRef(() => SingleComment)]
})
export class SingleComment {
  @Input() comment: string;

  constructor() {
  }

  ngAfterContentInit() {
        console.log('new comment', this.comment);
  }
}

You also need to ensure the recursion ends somewhere or you'll get a stack overflow. In the Plunker it is done using *ngIf:

Plunker example

Thank you very much Günther. This is exactly what I am looking for. Since I've posted pretty straightforward plunker without any if statements, it looks like a recursion that never ends, exactly. I've removed those parts of the code out of template where I check if currentComment has subComments. If so, I use `` directive again. I have try to add `directives: [SingleComment]`, but that broke the app totally and I couldn't come to the details app anymore. Without errors or anything being printed in console. Thank you for providing perfect example. — gregor, Jun 30 '16 at 05:56

Angular2 calling component within component with parameter

1 Answers1