6

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.

Evan Plaice
  • 13,944
  • 6
  • 76
  • 94
  • 3
    The alternative is correct, but at construction time it won't work. It has to be in ngOnInit at least. – Eric Martinez Dec 28 '15 at 19:26
  • @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. – Evan Plaice Dec 28 '15 at 19:47
  • You don't want to use `@Input` because it's not ES6 but at the same time you use `@Component`. How come? – a better oliver Dec 29 '15 at 09:02
  • @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. – Evan Plaice Dec 29 '15 at 16:21
  • 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. – a better oliver Dec 29 '15 at 19:58
  • @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. – Evan Plaice Dec 30 '15 at 15:15
  • [Decorators make it possible to annotate and modify classes and properties at design time.](https://github.com/wycats/javascript-decorators#summary). My comment is not about preferences nor is it a recommendation. Feel free to read it again. – a better oliver Dec 30 '15 at 22:51

1 Answers1

2

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.

Evan Plaice
  • 13,944
  • 6
  • 76
  • 94
  • 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? – jjwon Dec 30 '15 at 07:33
  • @jjwon 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). – Evan Plaice Dec 30 '15 at 14:26
  • @jjwon I verified that the markdown component works when it's installed via JSPM. I also created a separate project to demo its usage. https://github.com/evanplaice/ng2-markdown-component-demo – Evan Plaice Jan 02 '16 at 20:18