1

Hello I'm trying to recursive display an list, the error I get is:

Uncaught Error: Template parse errors:
More than one component matched on this element.
Make sure that only one component's selector can match a given element.
Conflicting components: TreeNodeComponent,TreeNode ("
    [ERROR ->]<tree-node [node]="categories"></tree-node>
  "): ng:///AppModule/TreeView.html@1:4

This is how these components looks like:

@Component({
  selector: 'tree-node',
  template: `
  <div>{{node.name}}</div>
  <ul>
    <li *ngFor="let node of node.children">
      <tree-node [node]="node"></tree-node>
    </li>
  </ul>
`
})
export class TreeNode {
  @Input() node: AdminCategory[];
}


@Component({
  selector: 'categories',
  template: `
    <tree-node [node]="categories"></tree-node>
  `,
})
export class TreeView {
  categories: AdminCategory[];

  constructor(private store: Store<AppState>, private dialog: MatDialog) {
    store.select('categoryState').subscribe(s => this.categories = s);
  }

  addCategory(category: AdminCategory) {
    this.store.dispatch(new AddCategory(new AdminCategory((category.id + 1), 'qwe', category.id)));
  }
....

I also added them in declarations in app.module.ts. What is wrong here? I don't get this error message because I didn't declare two same components, the first one is tree-node and the 2nd is categories.

minizibi
  • 653
  • 3
  • 13
  • 28
  • what do you mean by "I also added them in declarations in app.module.ts"? are these components declared twice in your code? – Kaddath May 18 '18 at 09:41
  • Can you create a [plunker](https://plnkr.co/) or [codesandbox](https://codesandbox.io/)? – guyaloni May 18 '18 at 09:41
  • Most probably, you can't. You can't perform recursive in template. (I'm not 100% sure) – Ritwick Dey May 18 '18 at 09:41
  • @RitwickDey that's what i thought first, then i found https://stackoverflow.com/questions/37746516/use-component-in-itself-recursively-to-create-a-tree (strongly related to the question, actually) – Kaddath May 18 '18 at 09:46
  • Yup I followed this linked example. Here is the stackblitz https://stackblitz.com/edit/angular-msgywe. Anyway there is another error, maybe could you guys propse another way to do that? I just want to display an unlimited nested list, when I click on element it should add new element as clicked element child – minizibi May 18 '18 at 10:02

0 Answers0