wesleygrimes

Upgrading to Angular 8 and NgRx 8

Overview

Do you have an awesome application written with Angular v7 using NgRx v7, but have been feeling left out will all the mentions online and at conferences about Angular v8 and NgRx v8? Well you are in luck! Today we will explore together, how to upgrade our applications to use Angular v8 using the Angular CLI tooling. We will also explore upgrading to NgRx v8. This will allow us to take advantage of the new features provided in NgRx v8. Included with NgRx v8 is a shiny set of creators, or type-safe factory functions, for actions, effects, and reducers.

Upgrading Dependencies

Upgrading Angular

The Angular team has provided a great website that walks through the process of upgrading in-depth. This website can be found at Angular Update Tool. We will touch on some of the information today.

arniebradfo

import { Component, Input, HostBinding } from '@angular/core';

/*
  <gist-keeps-class class="some classes" [booleanInput]="true" [stringInput]="some-thing"></gist-keeps-class>
  will output this:
  <gist-keeps-class class="some classes has-boolean some-thing" >
    this component keeps class="class" attributes
  </gist-keeps-class>

  it's not throughly tested, but should work?

praveenpuglia

@Effect({dispatch: false})
entityCreationSuccess$: Observable<Action> = this.actions$.pipe(
  ofType(UserActions.CREATE_USER_SUCCESS, PostActions.CREATE_POST_SUCCESS),
  tap(action => {
    this.router.navigate(['../'], {relativeTo: this.route})
  })
);

peterbsmyth

Making chained API Calls using @ngrx/Effects

Purpose

This recipe is useful for cooking up chained API calls as a result of a single action.

Description

In the below example, a single action called POST_REPO is dispatched and it's intention is to create a new repostiory on GitHub then update the README with new data after it is created.
For this to happen there are 4 API calls necessary to the GitHub API:

1. POST a new repostiry
2. GET the master branch of the new repository
3. GET the files on the master branch

ThomasBurleson

NgRx State Management with TicketFacade

Facades are a programming pattern in which a simpler public interface is provided to mask a composition of internal, more-complex, component usages.

When writing a lot of NgRx code - as many enterprises do - developers quickly accumulate large collections of actions and selectors classes. These classes are used to dispatch and query [respectively] the NgRx Store.

Using a Facade - to wrap and blackbox NgRx - simplifies accessing and modifying your NgRx state by masking internal all interactions with the Store, actions, reducers, selectors, and effects.

For more introduction, see Better State Management with Ngrx Facades

michaelhenrique182

-- no template
<a [routerLink]="['users']" [queryParams]="{ page: 87 }">Ir para página 87 de usuários</a>


-- no componente (ou serviço)
  goTo(page: number) {
    this.router.navigate(['/users'], { queryParams: { page: page } });
  }

PCreations

Source : Learn to combine RxJs sequences with super intuitive interactive diagrams

Legend

Merge

Concat

abbazabacto

// extended upon: https://ruanbeukes.net/Angular-Typesafe-Reactive-Forms/

import { Injectable } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup, ValidatorFn, AsyncValidatorFn, FormBuilder } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

type PropertyFn<T, R> = (val: T) => R;

interface AbstractControlTyped<T> extends AbstractControl {
  readonly value: T;

rhamedy

I came across HikariCP and I was amazed by the benchmarks and I wanted to try it instead of my default choice C3P0 and to my surprise I struggled to get the configurations right probably because the configurations differ based on what combination of tech stack you are using.

I have setup Spring Boot project with JPA, Web, Security starters (Using [Spring Initializer][1]) to use PostgreSQL as a database with HikariCP as connection pooling.
I have used Gradle as build tool and I would like to share what worked for me for the following assumptions:

1. Spring Boot Starter JPA (Web & Security - optional)
2. Gradle build tool
3. PostgreSQL running and setup with a database (i.e. schema, user, db)

This gist is related to SO post https://stackoverflow.com/questions/26490967/how-do-i-configure-hikaricp-in-my-spring-boot-app-in-my-application-properties-f

gdurastanti

#!/bin/sh
# Reset Parallels Desktop's trial and generate a casual email address to register a new user
rm /private/var/root/Library/Preferences/com.parallels.desktop.plist /Library/Preferences/Parallels/licenses.xml
jot -w pdu%[email protected] -r 1