title: How to pass values from different methods in single service file in Angular?
body: <p>I have a service file, in that I have two methods getdata and delete in that data is coming from API. getdata method is working fine.</p>
  
  <p>I have problem in delete() in that siteId it is not reading any data. If I clicked save button it should identify the siteid and delete that particular data. But I think I have written wrong in service file and component file. </p>
  
  <p>service.ts</p>
  
  <pre><code>datasites : Data
  getData(): Promise&lt;PagedResult&lt;data&gt;&gt; {
  
    const url = `${environment.API_URL}/data/GetData`;
    //See that is a "simple" get
    return this.httpClient.get&lt;PagedResult&lt;data&gt;&gt;(url).toPromise();
  }
  delete(): Promise&lt;Data&gt;{
    alert(2);
    const siteId = this.datasites.principalId;
    const url = `${environment.ADMIN_API_URL}/sites/DeleteSite?siteId=`+ siteId;
    console.log(siteId);
    return this.httpClient.post&lt;Sites&gt;(url, request).toPromise();
  
  }
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>async ngOnInit(){
        alert("***********");
  
        this.data = await this.dataService.getData();
        console.log(this.data[0].principalId);
         this.deleteSiteId = this.data[0].principalId;
         console.log(this.deleteSiteId);
  
      }
     delete(data){
       alert(aaaaaaaaa);
       this.dataService.delete(data);
       console.log(data.principalId);
  
     }
      showButtons: boolean = false;
    clickEvent(data){
      data.isClicked = !data.isClicked;
    this.showButtons = !data.showButtons;
  }
    }
  </code></pre>
  
  <p>.html</p>
  
  <pre><code>&lt;div *ngIf="showButtons"&gt;
        &lt;button (click)="delete()"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>