app.module.ts
import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {AppComponent} from './app.component'; import {HttpClientModule} from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
server.service.ts
import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ServerService { constructor(private http: HttpClient) { } postServers(servers: any[]) { this.http.post('https://angularsamples.firebaseio.com/data.json', servers).subscribe(value => { console.log(value); }); } putServers(servers: any[]) { this.http.put('https://angularsamples.firebaseio.com/data.json', servers).subscribe(value => { console.log(value); }); } }
app.component.ts
import {Component} from '@angular/core'; import {ServerService} from './server.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { servers = [ { name: 'Testserver', capacity: 10, id: this.generateId() }, { name: 'Liveserver', capacity: 100, id: this.generateId() } ]; constructor(private server: ServerService) { } onPostServer() { this.server.postServers(this.servers); } onPutServer() { this.server.putServers(this.servers); } onAddServer(name: string) { this.servers.push({ name: name, capacity: 50, id: this.generateId() }); } private generateId() { return Math.round(Math.random() * 10000); } }
References
https://angular.io/guide/http#making-a-post-request
https://angular.io/guide/http#making-a-put-request