Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/endykaufman/ngx-cold
Two small directives for work with observable in Angular9+ without subscribe
https://github.com/endykaufman/ngx-cold
angular async click cold directives form rxjs subscribe
Last synced: 20 days ago
JSON representation
Two small directives for work with observable in Angular9+ without subscribe
- Host: GitHub
- URL: https://github.com/endykaufman/ngx-cold
- Owner: EndyKaufman
- License: mit
- Created: 2019-10-29T20:10:06.000Z (about 5 years ago)
- Default Branch: develop
- Last Pushed: 2024-09-06T09:19:35.000Z (2 months ago)
- Last Synced: 2024-10-11T14:19:24.716Z (about 1 month ago)
- Topics: angular, async, click, cold, directives, form, rxjs, subscribe
- Language: TypeScript
- Homepage: https://endykaufman.github.io/ngx-cold
- Size: 2.76 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-cold
[](https://greenkeeper.io/)
[](https://travis-ci.org/EndyKaufman/ngx-cold)
[](https://badge.fury.io/js/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.
## Installation
```bash
npm i --save ngx-cold
```
## Links
[Demo](https://endykaufman.github.io/ngx-cold) - Demo application with ngx-cold.
[Stackblitz](https://stackblitz.com/edit/ngx-cold) - Simply sample of usage on https://stackblitz.com
# Usage
## Usage \*coldClick
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
```html
...
Save with *coldClick
{{ 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);
}
...
```
## Usage \*coldForm
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
```html
...
Save with *coldForm
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
}
});
}
...
```
## License
MIT