DEV Community

ILshat Khamitov
ILshat Khamitov

Posted on • Edited on

Two small directives for work with observable in Angular 8 without subscribe

#angular #rxjs #directives #async

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
Enter fullscreen mode Exit fullscreen mode

Usage *coldClick

app.module.ts

import { HttpClientModule } from '@angular/common/http'; import { NgxColdModule } from 'ngx-cold'; @NgModule({ imports: [ ... HttpClientModule, NgxColdModule, ... ], ... }) export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

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> ...
Enter fullscreen mode Exit fullscreen mode

app.component.ts

import { HttpClient } from '@angular/common/http'; ... constructor(private httpClient: HttpClient) {} onSave(data: any) { return this.httpClient.post('/api/user', data); } ...
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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> ...
Enter fullscreen mode Exit fullscreen mode

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 } }); } ...
Enter fullscreen mode Exit fullscreen mode

Links

Sources - Sources on github

Demo - Demo application with ngx-cold.

Stackblitz - Simply sample of usage on https://stackblitz.com

Top comments (0)