AngularSnippets.md

title
A snippets

Toggle me!

Peek a boo!

A collapsible section with markdown

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 }
);