CODEWITHSUNDEEP
angulartypescript
user1491987
user1491987

Reputation: 751

Angular 4 load recursive template using input

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?

Upvotes: 0

Views: 346

Answers (1)

Giannis Faropoulos
Giannis Faropoulos

Reputation: 886

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.

Upvotes: 1

Related Questions