@Input not working in angular 2 component

Question

EJS variable to Angular2 component

I am tring to pass the model data object which is a JSON object from ejs template to the angular2 component. Here is my code for the component which has a input called test. I have listed down the options which I tried to make it work.

import {Component, OnInit, Input } from "@angular/core";
import { Router } from "@angular/router";
import {Location} from '@angular/common';

declare var $:JQueryStatic;


@Component({
    selector: "app-loader",
    templateUrl: "views/app-index.html"
})

export class AppComponent {
  public viewType;

  @Input() test: string;

  constructor(private router: Router, private location: Location) {
    // console.log(this.providers);
    switch (location.path()) {
      case '/login':
        this.viewType = "login";
        break;
      default:
        this.viewType = "/";
        break;
    }
  }

  ngOnInit() {
    console.log(this.test);
    $("app-loader").addClass("md");
  }
}

Passing the ejs template data as below:

Option 1:

<app-loader [test]="'<%= JSON.stringify(providers) %>'">Loading...</app-loader>

Option 2:

<app-loader [test]="providers">Loading...</app-loader>

If the `AppComponent` is a root component then it won't work http://stackoverflow.com/questions/39614451/angular-2-input-binding-does-not-work/39614592#39614592 — yurzui, Nov 29 '16 at 05:57

score 1 · Answer 1 · answered Nov 29 '16 at 07:45

If you want to retrieve this input data try

<app-loader test="yourdata as string">Loading...</app-loader>

In the app

 constructor(private elementRef: ElementRef,) {
  var native = this.elementRef.nativeElement;
  var shadow = native.getAttribute("test");
      }

@Input not working in angular 2 component

EJS variable to Angular2 component

1 Answers1