title: Which is the best place to keep logic in angular?
body: <p>I am working on an angular application. Let's say when we are implementing a feature like onclick of some button, call an api, process the data, show results in table. Table data should be retained across pages(so we need to keep the variable in service).</p>
  
  <p>For implementation, first we can start calling function from template, then in component we can do some checks, and call a service to fetch data. Once we get the data, if we want to process the data, in that case function to process the data should be in component or service ?? </p>
  
  <p>Can we write logic in service file? Or it should be in component file? What is the best practise?</p>
  
  <p>Approach 1: </p>
  
  <pre><code> getApi() {
      this.http
        .get(url)
        .subscribe(response=&gt; {
            this.afterFetchingProcessData(response); // this might be some function in service file
        },error=&gt;{
            // handle error
        });
    }
  
    afterFetchingProcessData(response){
         //process the data and assign to variable 
         this.tabledata = response;
    }
  </code></pre>
  
  <p>Or we should follow the below pattern</p>
  
  <p>Approach 2: 
  In component file:</p>
  
  <pre><code> getApi() {
        this.service.getApi().subscribe(response=&gt; {
            this.afterFetchingProcessData(response); // this might be some function in service file
        },error=&gt;{
            // handle error
        });
    }
  
    afterFetchingProcessData(response){
         //process the data and assign to variable 
         this.service.tabledata = response;
    }
  </code></pre>
  
  <p>In service file just call Api and return the response</p>
  
  <pre><code> getApi() {
      return this.http
        .get(url);
    }
  
  </code></pre>
  
  <p>Which is best practice to follow Approach 1 or Approach 2 and why?</p>