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
– harishr, Commented Jun 5, 2019 at 10:07

Denuka · Accepted Answer · 2019-06-05 10:01:41Z

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 5, 2019 at 10:01

Denuka

1,2623 gold badges14 silver badges24 bronze badges

answered Jun 5, 2019 at 9:53

taiwo sunday

332 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denuka · Accepted Answer · 2019-06-05 10:20:07Z

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 5, 2019 at 10:20

answered Jun 5, 2019 at 9:43

Denuka

1,2623 gold badges14 silver badges24 bronze badges

1 Comment

Lee Over a year ago

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.

JWP · Accepted Answer · 2019-06-05 11:17:45Z

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 5, 2019 at 11:17

JWP

6,9853 gold badges59 silver badges77 bronze badges

1 Comment

Lee Over a year ago

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.

Collectives™ on Stack Overflow

angular @input don't pass data to component

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related