CODEWITHSUNDEEP
angularangular6angular7angular8
user630209
user630209

Reputation: 1207

Loading repeated master service at once

There is a list of master data which is used in most of the components.

I used to load this in ngInit like this.

ngOnInit() {
    this.loadMasters();
 }

loadMasters() {
    this.masterService.getOrg().subscribe(response => {
      if (response && response['result']) {
        this.organisms = response['result'];
      }
    })

    this.masterService.getCat().subscribe(response => {
      if (response && response['result']) {
        this.category = response['result'];
      }
    })
......................
}

This code has been repeated in most of the components.

I need a standard solution for

1) Avoid calling these masters in all components, that costs unwanted server calls.I Prefer a solution for this. 2) Is there any way to cache this. If above there is no solution will try this.

Upvotes: 0

Views: 98

Answers (2)

Palak Jadav
Palak Jadav

Reputation: 1272

const routes: Routes = [
  {
    path: 'master',
    component: MasterInfoComponent,
    resolve: {
      org: OrgResolverService,
      cat: CatResolverService,
    },
    children: [
    { 
        path: 'child1',
        component: child1Component,
    }
   ]
  },
];

in all child Component you can get data like this

ngOnInit() {
   this.route.parent.data.subscribe(data => {
       this.cat= data.cat;
       this.org= data.org;
    });
}

Upvotes: 1

Leonardo Alves
Leonardo Alves

Reputation: 533

In your masterService you can create two BehaviorSubjects, like:

categories$ = new BehaviorSubject<any>(null);
organizations$ = new BehaviorSubject<any>(null);

then populate them using a conditional to avoid more than one call. Move the loadMasters to inside of the service, like:

mastersService.ts

loadMasters() {
    // check for value in org before doing request
    if (!this.organizations$.value) {
         this.masterService.getOrg().subscribe(response => {
            if (response && response['result']) {
              // set value into behavior subject
              this.organizations$.next(response['result']);
            }
         })
    }

    // do the same for the categories
    if (!this.categories$.value) {
         this.masterService.getCat().subscribe(response => {
              if (response && response['result']) {
                  // set value into behavior subject
                  this.categories$.next(response['result']);
              }
         })
    }
...
}

Then in all places where you need to consume the value, you can subscribe into the behavior subjects, and before that call the loadMasters to ensure the data is already loaded:

mycomponent.ts:

public ngOnInit(): void {
    this.mastersService.loadMasters(); // load data if not loaded yet
    // consume the data from the behavior subjects
    this.mastersService.categories$.subscribe(value => {
       console.log(value);
    });
    this.mastersService.organizations$.subscribe(value => {
       console.log(value);
    });

}

Upvotes: 1

Related Questions