Angular2 Recursive Templates in javascript

Question

I have been trying to follow this tutorial to create a nested tree view. The tutorial is in typescript while I am trying to do a similar thing in javascript with Angular2.

In the typescript code, the tree-view component looks like so:

import {Component, Input} from 'angular2/core'; 
import {Directory} from './directory'; 
@Component({
    selector: 'tree-view',
    templateUrl: './components/tree-view/tree-view.html',
    directives: [TreeView] 
}) 
export class TreeView {
    @Input() directories: Array<Directory>; 
}

In javascript that should convert to:

TreeView = ng.core
  .Component({
    selector: 'tree-view',
    templateUrl: './components/tree-view/tree-view.html',
    directives: [TreeView],
    inputs: ['directory'],
  })
  .Class({
    constructor: function() {
    },
  });

However, javascript throws the following error:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'function () {'

I believe it's because I'm calling directives: [TreeView] before TreeView has been fully defined. If I remove that directive line, the error goes away. However, I don't know why it would work in typescript and not javascript if typescript simply compiles to javascript. This is the compiled javascript from the typescript code. I'm not sure what I'm missing. Any help would be super appreciated.

Try with directives : [ng.core.forwardRef(function() { return TreeView; })] — Eric Martinez
– Eric Martinez, Commented Jan 21, 2016 at 1:29
Eric, you are an angel among programmers. That worked like a charm. If you make it an answer, I will accept it. Do we know how/why this solution works? — Kamala Phoenix
– Kamala Phoenix, Commented Jan 21, 2016 at 18:03

Community · Accepted Answer · 2017-05-23 12:02:24Z

3

This question has been answered a few times

First of all classes are not hoisted. Quoting from MDN

An important difference between function declarations and class declarations is that function declarations are hoisted and class declarations are not. You first need to declare your class and then access it [...]

The documentation for forwardRef says

For instance, forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.

So it's as easy as adding forwardRef to your code

directives : [ng.core.forwardRef(function() { return TreeView; })]

You can read more about this subject

Forward references in Angular 2
Others questions from StackOverflow

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jan 21, 2016 at 21:42

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benjamin McFerren Over a year ago

Hi Eric - could you please share a plnkr/fiddle that demonstrates using forward ref in the same array as other directives used by the component? IE directives : [ RouterLink, CORE_DIRECTIVES, ng.core.forwardRef(function() { return TreeView; })]

Collectives™ on Stack Overflow

Angular2 Recursive Templates in javascript

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related