Why does adding a constructor break Angular 2 here?

Question

I am attempting to define a TypeScript class called NavItem that I want to hold a title and url. I find that if I define this class and instantiate it using object notation {title: "foo", url: "bar"} it works perfectly, but as soon as I add a constructor (even if I don't immediately use it) it completely breaks:

import {Component, Input} from 'angular2/core'

@Component({
    selector: 'nav-item',
    templateUrl: './views/navitem.html',
})
export class NavItem {
    @Input() title: String = "default title";
    @Input() url: String;

    // if I comment the following out it works fine:
    constructor(inTitle: String, inUrl: String) {
        this.title = inTitle;
        this.url = inUrl;
    }
}

If I put the constructor in, I get this in my page:

EXCEPTION: No provider for String! (NavItem -> String) in [navItems in TopNav@2:11]

basarat · Accepted Answer · 2016-03-11 00:55:36Z

3

If I put the constructor in, I get this in my page:

This is because angular is supposed to instantiate the controller for you. You don't do new FooController, angular does. So any constructor parameters must have a corresponding provider registered with angular.

answered Mar 11, 2016 at 0:55

basarat

278k61 gold badges475 silver badges528 bronze badges

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

1 Comment

devios1 Over a year ago

I see. I think my problem is I need to split up my model and view. I am treating NavItem as both a model and a view (a view with properties), and that seems to be a bad idea with Angular.

technoSpino · Accepted Answer · 2016-03-11 00:58:00Z

2

The constructor is used for DI with components. If you want to pass in the values of title and url you would do the following.

<nav-item [title]="Sometitle" [url]="http://someurl.com">

Angular will hook it up for you

answered Mar 11, 2016 at 0:58

technoSpino

5104 silver badges12 bronze badges

Collectives™ on Stack Overflow

Why does adding a constructor break Angular 2 here?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related