Search code examples
ecmascript-6angularangular2-inputs

Angular2 ES6 @Input alternative


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.


Solution

  • 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.