Angular2 ES6 @Input alternative

Question

I'm trying to build a <markdown-component> using ES6 syntax. The @Input syntax sugar isn't supported in ES6 and I can't find a viable alternative.

I'm defining the input in the parent with:

<ng2-markdown [source]="source"></ng2-markdown>

Then accepting the input using:

@Component({
  selector: 'ng2-markdown',
  inputs: [ 'source' ]
})

If I add a template I can get it will output the value as expected but there's no way to use the input in the constructor.

This module should actually be a directive, and the source value will define the path to the Markdown file being loaded.

Adjunction

The alternative is correct, but at construction time it won't work. It has to be in ngOnInit at least. – Tetrode

@EricMartinez Thank you so much. I've been stuck on that for hours. I'll add an answer showing what worked so -- hopefully -- it'll help others. – Adjunction

You don't want to use @Input because it's not ES6 but at the same time you use @Component. How come? – Manes

@zeroflagL Class/method decorators are part of the future ES7 spec and can be enabled in babel/traceur. For now at least, member decorators are syntax sugar specific to Angular2/Typescript. – Adjunction

They are not part of the spec, there's only a proposal yet. And the decorators are for classes and properties. But it wouldn't even matter because you have to compile your code anyway and you'll have to do so for a long time. So you could as well use TypeScript. Using something because you hope that it might become a standard sometime but not using something else although you could is weird. – Manes

@zeroflagL No they're not spec, but AFAIK decorator proposal in ES7 only applies to classes/methods. Property/function decorators aren't even a proposal yet. You argue that I should target an explicit non-standard (ie Typescript) as opposed to a future standard (ES6/7) because... logic? It may sound crazy to a Java dev but I actually prefer JS to the statically-typed equivalent. Either way, I'm not here to axe-grind over subjective preference. To each their own. – Adjunction

Decorators make it possible to annotate and modify classes and properties at design time.. My comment is not about preferences nor is it a recommendation. Feel free to read it again. – Manes

Answer 1

Thanks to @Eric Martinez's comment, I was able to get it working.

The inputs aren't available until the OnInit phase of the lifecycle.

The following worked:

...
export class MarkdownComponent {
  constructor () {}

  ngOnInit() {
    console.log(this.source);
  }
...

I was trying to access the input in the constructor, before the inputs were initialized.

Adjunction

unrelated, but i've spent the last 1+ hours trying to figure out how to include an external library (also was hoping to use a Markdown parser) into my Angular 2 + SystemJS app with little success -- how did you end up doing it? – Bullring

@Bullring I use JSPM to manage imports. It takes care of installing the package, installing dependencies, and mapping everything to labels in config.js. Sorry about the Markdown parser, I literally created that repo yesterday by extracting the component from another project. I'll add a note to warn others to hold off until I can test/verify that it works. If you want to see a working implementation, checkout the repo for my personal site (evanplaice.com). – Adjunction

@Bullring I verified that the markdown component works when it's installed via JSPM. I also created a separate project to demo its usage. github.com/evanplaice/ng2-markdown-component-demo – Adjunction