Two small directives for work with observable in Angular9+ without subscribe.
npm install ngx-cold
Two small directives for work with observable in Angular9+ without subscribe:
- \*coldClick - easy way for run http post from template.
- \*coldForm - easy way for submit typed form data to remote server from template.
``bash`
npm i --save ngx-cold
Demo - Demo application with ngx-cold.
Stackblitz - Simply sample of usage on https://stackblitz.com
app.module.ts
`js
import { HttpClientModule } from '@angular/common/http';
import { NgxColdModule } from 'ngx-cold';
@NgModule({
imports: [
...
HttpClientModule,
NgxColdModule,
...
],
...
})
export class AppModule {}
`
app.component.html
` Save with *coldClickhtml`
...
(click)="coldSave.call({userData:'custom data'})"
[disabled]="coldSave.isLoading"
>
{{ coldSave.isLoading ? 'Save in processing...' : 'Save' }}
...
app.component.ts
`js`
import { HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) {}
onSave(data: any) {
return this.httpClient.post('/api/user', data);
}
...
app.module.ts
`js
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
` Save with *coldFormhtml`
...
Loading...
...
app.component.ts
`js``
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
}
});
}
...
MIT