angular @input don't pass data to component

Question

This should be simple question while as a newbie I don't know what's the root cause.

Component definition:

@Component({
  selector: 'app-angular-demo-web-part',
  templateUrl: './angular-demo-web-part.component.html',
  styleUrls: ['./angular-demo-web-part.component.scss'],
  encapsulation: ViewEncapsulation.Emulated
})
export class AngularDemoWebPartComponent implements OnInit {
  @Input() description: string;
  @Input() _Myitems: any[];//=[{text:"A",value:1},{text:"B",value:2},{text:"C",value:3}];
  @Input() testdescription: string;
  constructor() { }
  singleRootTree: Node<Folder> = mockTree;  
  ngOnInit() {
  }

}

Template:

<p>
  It works! Description: {{description}}
  <br />
  testdescription: {{testdescription}}
  <br/>
  array:{{_Myitems}}
  <treetable [tree]="singleRootTree"></treetable>  
</p>
<div id="navigation" class="DemoA">
  <div class="DemoB">
    <ul>
        <li *ngFor="let item of _Myitems">
          {{ item.text }}
        </li>
    </ul>
  </div>
</div>

Render angular

public render(): void {
    this.domElement.innerHTML = `<app-angular-demo-web-part description="${ this.properties.description }" testdescription="asasasa" [_Myitems]="[{text:"A1",value:1},{text:"B1",value:2},{text:"C1",value:3}]"></app-angular-demo-web-part>`;
  }

But the array don't show anything, if I set the value in component directly, the data will show.

Result:

It works! Description: AngularDemo testdescription: asasasa array:

may not be correct but try to use single quote for inner part of array values.. otherwise it would create invalid html... — harishr, Jun 05 '19 at 10:07

Denuka · Answer 1 · 2019-06-05T10:20:07.293

0

I created separate array in .ts file for array in and pass that array name to [_Myitems].

 array = [{text:"A1",value:1},{text:"B1",value:2},{text:"C1",value:3}];

within selector

[_Myitems]="array"

stackblitz example

edited Jun 05 '19 at 10:20

answered Jun 05 '19 at 09:43

Denuka

1,142
3
13
21

If i init the array in component, the data will show, but description and testdescription are @input same as array, both description and testdescription showed. – Lee Jun 10 '19 at 00:59

score 0 · Answer 2 · edited Jun 05 '19 at 10:01

0

I think it is not showing because you are not initializing it when you run it. Set it in ngOnInit and see it run. If you don't understand you can check this link, the answer has being provided.

edited Jun 05 '19 at 10:01

Denuka

1,142
3
13
21

answered Jun 05 '19 at 09:53

taiwo sunday

33
1
8

score 0 · Answer 3 · answered Jun 05 '19 at 11:17

0

@Input(varname) varname:vartype.

Set breakpoint on ngInit and inspect value, if not there check misspelling first. Then check right hand side value.

answered Jun 05 '19 at 11:17

JWP

6,672
3
50
74

If I set value in component directly @Input() _Myitems: any[]=[{text:"A",value:1},{text:"B",value:2},{text:"C",value:3}]; , the data will show, but I need the data @input same as description or testdescription. – Lee Jun 10 '19 at 09:32

angular @input don't pass data to component

3 Answers3