inject inputs into component constructor with es5 and es6

Question

im trying to figure out how to get inputs using the es5 and es6 syntax in angular 2. i know its possible but the only documentation i can find on it uses the @ symbol which from what i understand is just syntax for the compiler but im not able to use a compiler so i have to write my code in just es5 and es6 no compiler no typescript whatsoever (believe me ive tried to get a typescript compiler on my computer but in my current environment im not able to.) does anyone know how to get inputs to work using just es5 and es6. here is what ive tried but i keep thinking i need some kind of injector for the input but i cant find any documentation on the injector aside from the typescript syntax

app.headerbtn = ng.core.Component({
    selector : 'header-btn',
    template : "<div class='headerbtn'>hello {{text}}</div>",
    inputs : ["text"]
}).Class({
    constructor : [function() {
        console.log(this);
    }],
    ngDoCheck : function() {
        this.text=this.text||'hi';
        console.log(this);
    }
});

then my html

<header-btn [text]='hello world'></header-btn>

the component is successfully bootstrapped and the it prints the constructor object to the console twice the problem being the first one is an empty object (which can make sense because it hasnt been initialized yet) but the second one has the text equal to "hi" meaning that the this.text is not defined before. or on any subsequent checks and the dom supports this as it prints hi into the {{text}}

Looks like a dup of http://stackoverflow.com/a/33036634/217408 — Günter Zöchbauer, Feb 12 '16 at 15:36
no that isnt what im looking for. that is unique to es6 whenever i try to use import it gives me errors — Binvention, Feb 12 '16 at 15:40
it just says unexpected token "import" no matter where i put it in my code. does import require a compiler? — Binvention, Feb 12 '16 at 15:46
Doesn't sound like an issue with injecting. I guess you should update your question title and probably also the question itself. — Günter Zöchbauer, Feb 12 '16 at 15:47
but there should be a way to use inputs with es5 where import is unique to es6 — Binvention, Feb 12 '16 at 15:48
because currently chrome doesnt support import but obviously typescript compiles to something that will run on chrome. so there has to be an alternative that will work. — Binvention, Feb 12 '16 at 15:55

Thierry Templier · Accepted Answer · 2016-02-12T22:13:22.590

0

The problem is that you use [text] (interpolation) with a value that isn't an expression. You would have the same problem with TypeScript. You could try this:

<header-btn text="hello world"></header-btn>

In the case of an expression:

<header-btn text="someExpression"></header-btn>

If you want to use [text], you need to define the expression with '':

<header-btn [text]="\'hello world\'"></header-btn>

Here is a plunkr describing this: https://plnkr.co/edit/cGmZgs9dCCyf8ICC8q9N?p=preview

edited Feb 12 '16 at 22:13

answered Feb 12 '16 at 15:55

Thierry Templier

198,364
44
396
360

didn't change anything. and in angular 2 the [] describe two way binding which i think is the syntax that is suppose to be there for inputs – Binvention Feb 12 '16 at 16:00
It's a bit strange. In Angular2 [...] is one way binding and [(...)] twowo way binding... – Thierry Templier Feb 12 '16 at 16:03
i used ngDoCheck because i found here http://stackoverflow.com/questions/34858100/access-angular-2-inputs-properties-inside-constructor that it isnt defined until after the constructor is initialized – Binvention Feb 12 '16 at 16:09
and if you look here https://angular.io/docs/js/latest/guide/cheatsheet.html under class field decorators for components and directives you'll see what i mean by the []. and taking the [] off didnt work so something else is wrong – Binvention Feb 12 '16 at 16:10
I updated my answer with a working plunkr describing what I explained in my answer... – Thierry Templier Feb 12 '16 at 22:15
Okay that's great to know. But it's still not working – Binvention Feb 13 '16 at 00:38
Nevermind I don't know what was different from the last times I tried it because I thought I'd tried it before but it just started working – Binvention Feb 13 '16 at 07:07

inject inputs into component constructor with es5 and es6

1 Answers1