What is Auxiliary route? Angular router supports rendering of multiple in-dependable routes. The most common use cases are rendering of popup, modal or sidebar along a main route . You can read more about Angular Auxiliary routing at https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

In this blog we will go over a use case with a modal dialog opened and closed by router. We will use React and react-router package to implement this application.

Let’s look at our requirements. We need to:

  1. Able to open a page to see the list of fruits

2. Able to click on a fruit link and open a modal…


Are you aware that in order to run Apollo subscription, GraphQL server should implement GraphQL over WebSocket Protocol?

Previously I worked with GraphQL servers that implement this protocol such as : Node server uses subscriptions-transport-ws, Elixir server with absinthe-socket and I integrated them with VanillaJS, React and Angular front-ends. No problem!

Recently I got a requirement to consume a subscription from Scala GraphQL implementation — sangria. It turned out that it is possible to implement WebSocket subscription in sangria (see sangria-subscriptions-example branch https://github.com/sangria-graphql/sangria-subscriptions-example/tree/trbngr-websockets) but GraphQL WebSocket protocol is not implemented and Apollo Subscription won’t work.

Since I did not have…


I love RxJS! This blog post shows how to use RxJS websocket client that automatically reconnect on errors.

Server

Let’s create a simple websocket server that terminates connection every 10th message. This is simple node server that uses ws package.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 7777 });

wss.on('connection', function connection(ws) {
let count = 0;
ws.on('message', function incoming(message) {
if (count === 10) {
ws.terminate();
} else {
ws.send(message);
count++;
}
});
});

RxJS Client

So now it is time to look at what RxJS provides to handle websockets. RxJS gives us webSocket subject that…


Recently I had to move some application logic to webworker and to simplify application state management I decided to use redux and redux-observable. The migration was almost smooth and easy except of how running Redux DevTools? After a little bit of digging out I found how React Native developers use Redux DevTools and decided to follow the same path. It worked out. Let me share my story here since I saw couple of claims that it should work but never run into any blog that describes all steps.

Small disclaimer: I won’t cover how to create a webworker and run…


Using Typescript in Angular for years I am a big supporter of typescript. It really helps me write more reliable code and catch errors faster. Recently I got involved in React project that was created using react-boilerplate. Since the react boilerplate project does not have support of typescript I decided to add it using typescript documentation at https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Here are the steps:

  1. Add typescript, typescript loader and types for react, node, jest and styled components
yarn add source-map-loader ts-loader typescript @types/jest @types/react @types/react-dom @types/styled-components -D

2. Replace babel with typescript in internals/webpack/webpack.base.babel.js and source-map support for js file.

module: {…


This October on AngularMix JEREMY ELBOURN presented Angular CDK package.

@angular/cdk is a new package from the Angular Material team that aims to help developers build their own components without being tied to Google’s Material Design branding. We’ll take a look at what’s available today in the CDK, demo what you can do with it, and talk about plans for the future.

During the presentation he demonstrated a color picker overlay using CDK package. The color overlay is opened immediately when a user mouse over an element that activates the overlay.

In my situation:

  • user should be able quickly mouse…


Should you need implement JWT with Angular on front-end and SpringBoot on back-end, this is the blog you need read!

The blog is divided on two parts — Angular and SpringBoot. Angular part is provided here and SpringBoot part is created by my colleague Nouhoun Y. Diarra at https://medium.com/@nydiarra/secure-a-spring-boot-rest-api-with-json-web-token-reference-to-angular-integration-e57a25806c50

You can find the full code at:

Angular https://github.com/ipassynk/angular-springboot-jwt

SpringBoot https://github.com/nydiarra/springboot-jwt

Project Overview

The example application is created using angular-cli and it uses angular2-jwt library as a helper library for handling JWTs for Angular applications. The application provides authentication and authorization use cases for normal and admin users.

Here is the application diagram.


AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

In my past years I used a lot of Promises and as you probably know a promise will start running as soon as you create it. On other hand, observables are cold and it means till you subscribe — nothing will run.

Let’s see the difference.

So this code with Promise will run immediately:

let p = new Promise((res)=> {
alert('Promise1');
res();
});

and this code with Observable won’t do anything till you subscribe:

Rx.Observable.of(1).do(x=>alert('Observable'))

to make…


RxJS provides several flattering operators such as switch, concat, merge that allow to merge multiple streams on observables into one stream. I found that switchMap is the operator that used the most in my projects. There are a lot of posts that demonstrate RxJS typeahead with switchMap and I won’t repeat it here but focus on just on switchMap details.

Let’s see a simple case with map operator:

Rx.Observable.of(1)
.map(x => x * 2)

In this example Observable is created with value 1 and we use “map” operator to multiple the value to 2.

Here is switchMap use case:

Rx.Observable.of('some_url')…


There are multiple open source and commercial Angular grids on the market and I really suggest to use one of them. So far I worked and experimented with Wijmo, Kendo, ngx-datatable, Ag-Grid Angular grids. All of them are complex grid libraries with a rich set functions that are required by enterprise customers, such as grouping, sorting, filtering, scrolling, freezing, formatting, exporting, pagination, cell and row selection and much more.

Grid examples

What I realized that all these grids follow the similar pattern that application developer should use to create a grid.

Let’s use open source ngx-datatable and commercial Wijmo one to create…

Julia Passynkova

Front-End developer working as an independent contractor with Angular and React in Toronto, Canada.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store