Two small directives for work with observable in Angular8+ without subscribe:
❄️ coldClick - easy way for run http post from template.
❄️ coldForm - easy way for submit typed form data to remote server from template.
Installation
npm i --save ngx-cold
Usage *coldClick
app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { NgxColdModule } from 'ngx-cold';
@NgModule({
imports: [
...
HttpClientModule,
NgxColdModule,
...
],
...
})
export class AppModule {}
app.component.html
...
<p>Save with *coldClick</p>
<button
*coldClick="let coldSave of onSave"
(click)="coldSave.call({userData:'custom data'})"
[disabled]="coldSave.isLoading"
>
{{ coldSave.isLoading ? 'Save in processing...' : 'Save' }}
</button>
...
app.component.ts
import { HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) {}
onSave(data: any) {
return this.httpClient.post('/api/user', data);
}
...
Usage *coldForm
app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgxColdModule } from 'ngx-cold';
@NgModule({
imports: [
...
HttpClientModule,
NgxColdModule,
ReactiveFormsModule,
FormsModule,
...
],
...
})
export class AppModule {}
app.component.html
...
<p>Save with *coldForm</p>
<div *coldForm="let coldForm of searchField; with: { delay: 700, change: onSearch, result: [] }">
<input [formControl]="searchField" />
<div *ngIf="coldForm.isLoading">Loading...</div>
<pre [innerText]="coldForm.result|async|json"></pre>
</div>
...
app.component.ts
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';
...
searchField = new FormControl();
constructor(
private httpClient: HttpClient
) {}
onSearch(search: string) {
return this.httpClient.get('/api/users', {
params: {
search
}
});
}
...
Links
Sources - Sources on github
Demo - Demo application with ngx-cold.
Stackblitz - Simply sample of usage on https://stackblitz.com
Top comments (0)