How the service method is working inside the ngOnInit() even ngOnInit() hook executed once?

Question

This is the code inside of my Angular service....

export class DataService{

     products = {
            'productsList': [
                 {id: 101, name: 'Apple', qty: 2},
                 {id: 102, name: 'Mango', qty: 1},
                 {id: 103, name: 'Grapes', qty: 1},
                 {id: 104, name: 'Banana', qty: 3}
             ]
      };

     constructor() {}

     getProducts(){
          return this.products.productsList;
     }

     addProduct(obj: {id:number, name:string, qty:number}){
         this.products.productsList.push(obj);
     }
 }

and this one is from angular component...

export class AppComponent implements OnInit{
   pId!:number;
   pName!:string;
   pQty!:number;
   pObject!:{id:number, name:string, qty:number};
   pObjectArray:{id:number, name:string, qty:number}[] = [];

   constructor(private dataService: DataService) {};

   ngOnInit(){
       this.pObjectArray = this.dataService.getProducts();
   }

   addProduct(){
       this.pObject = {
       id: this.pId,
       name: this.pName,
       qty: this.pQty
       }
       this.dataService.addProduct(this.pObject);
  }
}

So I just want to know when we will load this component then ngOnIniti() will called once and it will call the getProducts() method from the service class and then we will fetch the data from the service through this method and will assign it to pObjectAray property inside component. which is fine. but now if I add any new product by calling the addProduct() method of component and then this method will call the addProduct() of service so it will update the products object of the service so now products object have 5 new product instead of 4 because we just added the new one. so my question is how the getProducts() inside the ngOnInit executing automatically and updating the pObjectArray property of the component?

I mean ngOnIniti() only called once when we have loaded the component so ngOnInit() will not execute this time and I have already tested it by printing some message using console.log() inside ngOnInit(). So Please explain me how the data is updating automatically in component with every changes. for example if we add new data or delete or modify data then it is automatically updating the pObjectArray with the updated data.

Sorry for my bad english...

Answer 1

That is because of returning the array By reference from the service file. So, whatever changes you do to the array in your service file, will get reflected in the corresponding components that get that array.

And due to angular's default change detection strategy, you will see the updates in the template or anywhere you use that array.

If you send a copy of the array, then you don't see the behavior you are facing.

getProducts() {
  // return this.products.productsList.slice();
  or
  // return [ ...this.products.productsList ];
}

Check below snippet about how it mutating the array

var a = [1, 2, 3, 4, 5]

function changeArray(arr) {
  arr.splice(2, 1);
}

changeArray(a);
console.log(a);

Check this stackblitz for how returning the copy of array didn't update the component property

Answer 2

You can use observables. So when you update pObjectArray in your service, you subscribe it in your component and get new values.

One way is to define an subject in your service:

 private pObjectArraySubject = new BehaviorSubject<{id:number, name:string, qty:number}[]>([]);

 public pObjectArray$ = this.pObjectArraySubject .asObservable();

then update your subject in addProduct method:

addProduct(obj: {id:number, name:string, qty:number}){
    let ps = this.pObjectArraySubject.getValue();
    ps.push(obj);
    this.pObjectArraySubject.next(ps);
 }

subscribe it in your component ngOnInit life cycle:

this.dataService.pObjectArray$.subscribe((obj) => {
      this.pObjectArray = obj;
 });

So each time the value updates, your this.pObjectArray will update too. also you can use asyc pipe in your template:

this.pObjectArray = this.dataService.pObjectArray$;
<a-component [data]="pObjectArray  | async"></a-component>

REMEMBER: When you subscribe an observable, Don't forget to unsubscribe it. one approach is you unsubscribe your subscriptions in noOnDestroy lifeCycle.

Answer 3

Try changing you addProducts like the following:

addProduct(obj: {id:number, name:string, qty:number}){
this.products.productsList = [...this.products.productsList.push(obj)];
}

Answer 4

Aakash, It's as you say, the instruction on ngOnInit don't update the list, only is executed one time. You need, when add a new product refresh the list manually. You can repeat the call to this.dataService.getProducts

  addProduct() {
      ...
      this.dataService.addProduct(this.pObject);
      this.pObjectArray = this.dataService.getProducts();
  }

Or adding directly to your array

  addProduct() {
      ...
      this.dataService.addProduct(this.pObject);
      this.pObjectArray.push(this.pObject);
  }

Well, you has not observables - normally you want return observables and subscribe. You can simulate using the rxjs operator of, So we are changing your service to return observables -generally you call to an API using httpClient

import {of,Observable} from 'rxjs'

export class DataService {

     products = {...}

     constructor() {}

     getProducts():Observable<any[]> {
          //possible you'll change by a return this.httpClient.get('....')
          return of(this.products.productsList);
     }

     addProduct(obj: {id:number, name:string, qty:number}):Observable<any>{
         //we are going to return an object {success:true} or {success:false}
         //if we add successful the element
         bool ok=true;
         this.products.productsList.push(obj);
         if (ok)
           return of({success:true})
         
         return of({success:false})
     }
 }

Wen we received observables we has two options, using pipe async or subscribe. see that is different.

Using pipe async

pObjectArray$:Observable<any[]>
ngOnInit(){
       this.pObjectArray$ = this.dataService.getProducts();
   }

And your .html

<div *ngFor="let item of pObjectArray$ |async as >
     {{item.name}}{{item.qty}}
</div>

Normally we called to the variables that there are observables with the suffix "$", but it's optional

Subscribing and get the value of the subscription in a variable

pObjectArray:any[]=[] //see that it's an array and we can initialize with an empty array
ngOnInit() {
       this.dataService.getProducts().subscribe(res=>{
            this.pObjectArray=res.productList
       })
   }

And your .html

<div *ngFor="let item of pObjectArray>
     {{item.name}}{{item.qty}}
</div>

Well, this DON'T resolve that, when you add an element the list was updated, again we need change our function addProduct

addProduct() {
   ...
   this.dataService.addProduct(this.pObject).subscribe(res => {
       if (res.success)
       {
          //if you're using async pipe again repeat 
          this.pObjectArray$ = this.dataService.getProducts();
          //or if you're are subscribing you can
              //subscribing again (*)
              this.dataService.getProducts().subscribe(res=>{
                 this.pObjectArray=res.productList
              })
              //or adding manually the element to the array
              this.pObjectArray.push(this.pObject);
       }
   })
  }

Well, we choose that the function addProduct return an object with success true or false, but we can choose that the function addProduct return the product inserted -for example with the value "id" auto-incremented, or that return the whole list.

Well, until now we are using observables with httpClient or using 'of'. I'm sure you're asking about create a subscription in ngOnInit that refresh the list. Some observables you can subscribe an unique time and received the change. In the own Angular you has a FormControl and you can subscribe to valueChanges or ActiveRouted and subscribe to paramMap.

We are changing a few your service

import {of,Observable,Subject} from 'rxjs'

export class DataService{
  productSubject:Subject<any[]>=new Subject<any[]>();
  products = {...}

  init() {
    this.productSubject.next(this.products.productsList); 
  }

  addProduct(obj: { id: number; name: string; qty: number }) {
      obj.id=this.products.productsList.length+1;
      obj.name=obj.name+ " "+obj.id
      this.products.productsList.push(obj);
      this.productSubject.next(this.products.productsList);
  }

See that the function addProduct or init don't return anything, they only make a this.productObservables.next

We can subscribe in ngOnInit

   ngOnInit(){
       this.pObjectArray$ = this.dataService.productSubject;
   }
   //or 
   ngOnInit(){
       this.dataService.productSubject.subscribe(res=>{
         this.pObjectArray=res;
       })
   }

And in any moment the initialize the service, e.g. in ngAfterViewInit (enclosed in a setTimeout)

ngAfterViewInit() {
    setTimeout(() => {
      this.dataService.init();
    });
  }

And you see how, when you add an item, the list is refresh, but remember the reason is because our service makes the "next"

In this stackblitz I wrote the last method

(*)In an real application we using switchMap rxjs operator to change the value of the subscription, but It's only to get a general idea