title |
---|
A snippets |
Toggle me!
Peek a boo!Click to expand!
def func():
return 'hello, world!'
Create component
You can use the CLI. ng g c nameComponent
@Component({
selector: 'selector-name',
templateUrl: 'name.component.html',
})
export class NameComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
Small and useful snippets
- Route params subscribe
this.route.paramMap
.pipe(map(params => params.get('id')), tap(id => (this.id = +id)))
.subscribe(id => {});
Ngrx (State Management)
NgRx is the implementation of the Rx flux pattern. Is the most common state management library in Angular.
- Create an action
export const action = createAction('[Source] Event', props<{ key: type }>());
- Create an effect
effectName$ = createEffect(() => {
return this.actions$.pipe(
ofType(action),
/** An EMPTY observable only emits completion. Replace with your own observable stream */
operator(() => EMPTY)
);
});
- Create an effect (API CALL)
effectName$ = createEffect(() => {
return this.actions$.pipe(
ofType(FeatureActions.action),
operator(() =>
apiSource.pipe(
map((data) => FeatureActions.actionSuccess({ data })),
catchError((error) => of(FeatureActions.actionFailure({ error })))
)
)
);
});
- Reducer
const featureReducer = createReducer(
initialState,
on(featureActions.action, (state) => ({ ...state, prop: updatedValue }))
);
export function reducer(state: State | undefined, action: Action) {
return featureReducer(state, action);
}
- Selector
export const selectFeatureProperty = createSelector(
selectFeature,
(state: FeatureState, props) => selectLogic
);
- Debugging trick: To help you debug you can add this piece of code to your effects:
// Debugging purposes only
init$ = createEffect(
() =>
this.actions$.pipe(
ofType(XX),
tap((action) => console.log('[YY State] Debugging effects', action))
),
{ dispatch: false }
);