How to create a Angular material tree using Dynamic data coming from the angular services

Question

I am very new to angular . I am trying this example to create tree. Here is the link. I tried to implement the same ex in my project with the same tree data. Screen shot https://stackblitz.com/angular/dnndeajnmkvp?file=app%2Ftree-nested-overview-example.ts

But I am not getting the expected results as shown in the example. Expand and collapse are not working,I am seeing dots in UI which is not in tree data. I have attached the screenshot. What might have been gone wrong am i missing anything in tree configuration.....??

Please provide a basic stackblitz of the code you have tried so far — Siddhartha Gupta
@SiddharthaGupta have updated my question. Please can you help me out — Sushma
The stackblitz seems to be working fine... It looks more likely a CSS issue.. Inspect and see if the 'list-style-type' is missing on the 'li' elements... It's hard to comment without looking at your css code — Siddhartha Gupta

Eliseo Eliseo · Accepted Answer · 2019-08-23T12:05:41

the diference between use a static value or data from a service is that you need subscribe to the service to get the data. I transform the the example of the example of material in this stackblitz

If you look the differences are

1.-In constructor add the service

constructor(private dataService:DataService){}

2.- implements OnInit and in ngOnInit

  ngOnInit()
  {
    this.dataService.getData().subscribe(res=>{
        this.dataSource.data = res;
    })
  }

Well, in the example I use the 'rxjs' operator "of" to create an observable, you generally used this.httpClient.get(...your-url..)

How to create a Angular material tree using Dynamic data coming from the angular services

1 Answers