https://github.com/briebug/smartish
Smartish is a small utility library that makes creating "smartish" components in Angular a breeze
https://github.com/briebug/smartish
angular component-architecture components ngrx state state-machine state-management state-pattern typescript
Last synced: about 2 months ago
JSON representation
Smartish is a small utility library that makes creating "smartish" components in Angular a breeze
- Host: GitHub
- URL: https://github.com/briebug/smartish
- Owner: briebug
- Created: 2021-04-02T19:40:53.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-18T21:29:09.000Z (over 3 years ago)
- Last Synced: 2025-01-24T05:29:17.922Z (4 months ago)
- Topics: angular, component-architecture, components, ngrx, state, state-machine, state-management, state-pattern, typescript
- Language: TypeScript
- Homepage:
- Size: 406 KB
- Stars: 2
- Watchers: 22
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgRx Smartish
NgRx Smartish is a small utility library that makes creating "smartish" components in Angular a breeze. NgRx mixed with Smartish Components, provide a clean and declartive approach to building applications in Angular.
## Getting Started
You can install the package using `npm install @briebug/ngrx-smartish`
Next you will need to import `NgRxSmartishModule` in `app.module` as well as provide store using the `SMARTISH_STORE_TOKEN`.
```
import { NgRxSmartishModule, SMARTISH_STORE_TOKEN } from '@briebug/ngrx-smartish';
imoprt { StoreModule, Store } from '@ngrx/store';
@NgModule({
imports: [
NgRxSmartishModule,
StoreModule.forRoot({...})
],
providers: [{ provide: SMARTISH_STORE_TOKEN, useClass: Store }]
})
export class AppModule {}
```
## SmartSelect
With SmartishNgRx you can reference NgRx Selectors directly in your Angular Component's template without the need to inject the `store`. You simple need to add the `MemoizedSelector` in your component class and reference that property with the `smartSelector` pipe in your template.
```
import { selectError } from 'YOUR-STORE'
@Component({
selector: 'app-error',
template: `
{{ selectError | smartSelect | async }}
`
})
export class ErrorComponent {
error = selectError;
}
```
## SmartDispatch
With SmartishNgRx you can dispatch actions directly in your Angular Component's template without the need to dispatch an `@Output() EventEmitter` or injecting the `store`. You simply can use either the `smartDispatch` method.
```
import { smartDispatch } from '@briebug/ngrx-smartish';
import { addTaco } from '...my-actions';
@Component({
selector: 'app-component',
template: `Add Taco
})
export class MyComponent {
addTaco = smartDispatch(addTaco);
}
```
## NgRxSmartishComponent
With SmartishNgRx you can reference your NgRx store directly in your Components classes (or templates) without providing the store in the constructor. It's as easy as having your component extends `SmartishNgRxComponent`.
```
@Component({
selector: 'app-tacos',
template: ``
})
export class TacosComponent extends SmartishNgRxComponent {
tacos$ = store.select(selectTacos);
}
```
## Testing
Testing with NgRxSmartish is made simple with the `NgRxSmartishTestingModule`. Just import `NgRxSmartishTestingModule` into your `TestBed` with the `forRoot()` static method. You can also pass an optional `MockStoreConfig` inside of `forRoot()` to save you from having to provide `provideMockStore(...)` in your tests.
```
const config = { };
describe('YourSmartishComponent', () => {
beforeEach(async () => {
imports: [NgRxSmartishTestingModule.forRoot({ initialState: {...}})],
declarations: [YourSmartishComponent]
});
});
```