Angular 4 load recursive template using input

Question

I'm working on a component like a treeview. This is my tree-view template:

<div>{{templateData?.text}}">1</div>
<div class="row" *ngFor="let child of templateData?.children">
    <tree-view [templateData]="child" ></tree-view>
</div>

I have templateData as @Input() templateData in tree-view.component.ts. And in my app.component.html:

<tree-view [templateData]="templateData"></tree-view>

In app.component.ts, I'm getting templateData by calling api:

this.templateService.getTemplateData().subscribe(data => {
    this.templateData = data;
});

But when my tree-view component load, this.templateData hasn't initialized yet, how can I reload the component content when this.templateData updates?

You should be using templateParentData in your app.component.html as input data, but you are using templateData. I don't see anything else wrong with the code, change detection should trigger, unless you have set it to OnPush. Last would only work if you are passing a deep copy with updated information. Also its unclear from your snippets where template?.children is coming from. My guess would be this is part of templateData? — enf0rcer
– enf0rcer, Commented Feb 9, 2018 at 15:48
@ user3492940 I'm actually using templateData, I messed it up while copying code here. I'm trying couple different things, that's why variable names don't match, I updated the snippet. template?.children is now templateData?.children. — user1491987
– user1491987, Commented Feb 9, 2018 at 15:54
So you are good on that part, now you need to tell us where template?.children is coming from. Because as far as I know its still undefined. — enf0rcer
– enf0rcer, Commented Feb 9, 2018 at 15:56
So if it is still not working, next step would be to try console logging data inside your subscribtion. It might not be parsed yet. Resulting in unreadable data for the ngFor loop. Also you could try adding ngOnChanges hook in your tree view component ts file to see if the data actually reaches the component. — enf0rcer
– enf0rcer, Commented Feb 9, 2018 at 15:59

Giannis Faropoulos · Accepted Answer · 2018-02-09 16:14:47Z

You have provided a small amount of your code, so i will try to answer your question to the best of my knowledge. There are 2 quick solutions that i can think of.

**Solution 1 (*ngIf)**

You can use *ngIf on the tree-view Component and in that case you are making the component "wait" for the data to be initialized before rendering.

<tree-view *ngIf="templateData" [templateData]="templateData" ></tree-view>

Solution 2 (ngOnChanges)

You can use the Component Lifecycle Hook of your tree-view Component ngOnChanges to execute your logic when a change on your input data happens.

ngOnChanges(changes: SimpleChanges) {
    // only run when property "data" changed
    if (changes['data']) {
       // Custom Logic here
    }
}

In that case data is your @Input() value.

An other error that i can see in your code is here:

<div>{{template?.text}}">1</div>

There is an HTML error. Either remove the quotes or the whole section ">1

<div>{{template?.text}}>1</div> or <div>{{template?.text}}</div>

PS. I hope i helped you. In any case i suggest that you provide the whole Tree View Component TS file and also the app.component.ts block that you are initializing the Data.

Collectives™ on Stack Overflow

Angular 4 load recursive template using input

1 Answer 1

**Solution 1 (*ngIf)**

Solution 2 (ngOnChanges)

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution 1 (*ngIf)

Solution 2 (ngOnChanges)

Comments

Your Answer

Sign up or log in

Post as a guest

Related

**Solution 1 (*ngIf)**