In my app.component.html file, I have included the following template:
<test [someInput]="data"></test>
The 'data' variable is a JSON object property structured like this:
let data = {hello: "ciao"}
Below is the code from my test.component.ts file:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
@Input()
someInput:string
constructor() { }
ngOnInit() {
}
}
This is the template found in my test.component.html file:
<p>{{someInput.hello}}, test is functioning as expected!</p>
I believe that 'someInput' will be replaced with the name of the JSON property 'data', and my browser should display "ciao". However, I am unsure of where to define the variable 'let data = {hello:ciao}'. When I place it in the .ts file, Chrome console returns an error:
TestComponent.html:1 ERROR TypeError: Cannot read property 'hello' of undefined
at Object.eval [as updateRenderer] (TestComponent.html:1)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:45294)
at checkAndUpdateView (core.js:44277)
at callViewAction (core.js:44637)
at execComponentViewsAction (core.js:44565)
at checkAndUpdateView (core.js:44278)
at callViewAction (core.js:44637)
at execComponentViewsAction (core.js:44565)
at checkAndUpdateView (core.js:44278)
at callWithDebugContext (core.js:45632)