How do you update a certain component's view when dealing with multiple views?

Question

So I have an Angular app with multiple components.

One of the components is a navigation bar, which consists of user and admin dropdown menus.

How do I update the main view (the body) to dynamically XHR GET load another URL? My XHR GET code is already done with HttpClient. <div [innerHtml]="dashboardData"></div> doesn't work apparently.

Here is an example of my XHR code:

fetchDashboard() {


    const requestOptions: object = {
      // tslint:disable-next-line: max-line-length
      headers: new HttpHeaders().append('Authorization', 'Bearer Tokenhere'),
      responseType: 'text'
    };
    this.http.get<string>('http://localhost:3000/dashboard',
        requestOptions)
            .subscribe(response => {
                   console.log(response);
                   // this should get used to update the view
                   this.dashboardData = response;
            }
    );
}

I got recommended this but I don't know how to implement it for my use case.

Similar question, but my question needs a different solution.

@GaurangDhorda I get no error and my view doesn't show the intended content. I would also like to *completely replace* the content in the view — Munchkin, Nov 25 '19 at 09:16

billyjov · Answer 1 · 2019-11-25T11:37:32.703

You can create service to share data between your views using a RxJS Subject or BehaviorSubject.

e.g

your.service.ts

@Injectable()
export class MyService {

  private sharedSubject$ = new BehaviorSubject<YourDataType>(<YourDataType>{})


  public shareData(data: YourDataType): void {
    this.sharedSubject$.next(data);
  }

  public getSharedData(): Observable<YourDataType> {
    return this.sharedSubject$.asObservable()
  }

}

Inside your method fetchDashboard() following do:

fetchDashboard() {
 ...

  this.http.get<string>('http://localhost:3000/dashboard',
        requestOptions)
            .subscribe(response => {
                   console.log(response);
                   // this should get used to update the view
                   this.dashboardData = response;
                   this.yourShareService.shareData(response);
            }
    );

}

And in your other component just subscribe using getSharedData() and update your view as soon as the data as been updated.

For the subscription inside your component you can do something like this:

this.yourSharedService.getSharedData().subscribe(data => { this.dashboardData = data; })

I tried this without any avail: `ngOnInit() {console.log('dashboardData: ', this.dashboardData); this.shareData.getSharedData().subscribe(data => { this.data = data; }); }` — Munchkin, Nov 25 '19 at 11:37
The code doesn't appear to change the view. Please check out the related question, which contains the code https://stackoverflow.com/questions/58952820/how-to-import-dynamic-xhr-content-into-a-template-dynamically/58953746?noredirect=1#comment104167995_58953746 — Munchkin, Nov 25 '19 at 11:48

score 0 · Answer 2 · answered Nov 25 '19 at 10:05

have a look at this Stack Blitz Link

Your Json structure is ...

[
  {"id":1,"name":"Pencil"}, 
  {"id":2,"name":"Pen"}
]

your getData()..

getData(){
  return this.httpClient.get('/assets/data.json') .pipe(
   tap (data => this.data$.next(data))
  )
}

Your subject is...

  private data$ : Subject <any> = new Subject <any>();

Your ngOnInit() is...

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

here, first default data is loaded with two data of json using http.get(), then you have to click sendData button then this.data$ observable is set with your new data and we get those data in component by subscribing to it in ngOnInit() method.

I am working with HTML and not JSON.. I would select your answer if it were to expand upon the other answer, since that answer already does 80% of the needed job — Munchkin, Nov 25 '19 at 10:21
you can bind json data back to html using string interpolation. — Developer, Nov 25 '19 at 10:23

How do you update a certain component's view when dealing with multiple views?

2 Answers2