angular call to server RSS

• • Reply
  mark-1961

  Member

  1 Points

  331 Posts

  angular call to server

  Sep 16, 2019 07:04 PM|mark-1961|LINK

  is it possible in angular to have a button in a template/component that will fire a call to a server side controller method?

• • Reply
  Lewis Lu

  Member

  170 Points

  88 Posts

  Re: angular call to server

  Sep 17, 2019 07:22 AM|Lewis Lu|LINK

  Hi  mark-1961,

  In angular, you can use HttpClient to request data from the server.Below is the detailed official documentation.

  https://angular.io/tutorial/toh-pt6

  For a button in a template/component binding event, you can refer to the following document.

  https://angular.io/guide/user-input

  Here is an example  by using the .Net Core angular template in Visual Studio2019.

  HTML:

  <h1>Weather forecast</h1>
  
  <p>This component demonstrates fetching data from the server.</p>
  
  <p *ngIf="!forecasts"><em>Loading...</em></p>
  <button (click)="onClickMe()">Click me!</button>
  <table class='table table-striped' *ngIf="forecasts">
    <thead>
      <tr>
        <th>Date</th>
        <th>Temp. (C)</th>
        <th>Temp. (F)</th>
        <th>Summary</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let forecast of forecasts">
        <td>{{ forecast.dateFormatted }}</td>
        <td>{{ forecast.temperatureC }}</td>
        <td>{{ forecast.temperatureF }}</td>
        <td>{{ forecast.summary }}</td>
      </tr>
    </tbody>
  </table>

  ts file:

  import { Component, Inject } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-fetch-data',
    templateUrl: './fetch-data.component.html'
  })
  export class FetchDataComponent {
    public forecasts: WeatherForecast[];
  
    constructor(private http: HttpClient, @Inject('BASE_URL')  baseUrl: string) {
      
    }
  
    onClickMe() {
      this.http.get<WeatherForecast[]>('api/SampleData/WeatherForecasts').subscribe(result => {
        this.forecasts = result;
      }, error => console.error(error));
    }
  }
  
  interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
  }

  Best Regards ,

  Lewis Lu