Simple Angular event bus to pass data between views

You might have in your application unrelated components that interact (or should) with each other.

For example, a navigation bar, shown all along the different views is created inside application parent component and may display data that should change when other view is updated.

With Angular 1.x $broadcast and $emit services were  doing the job by broadcasting messages to potential subscribers.

With Angular 2+, to keep a low dependency relation between components and still be able to notify components of a change they could be affected by, Message Bus pattern is a good solution.

It can be implemented in various ways, from the simplest to the most complex. Here, we’ll try to keep it as simple as possible :

  • Strong typing
  • Message filtering based on message type
  • Low coupling between components


Message bus will consist in a simple class with only a dependency on Rxjs library.


Just add EventsService to @NgModule.providers in your module class and inject it in components that will use it.

It’s ready !

Sources :

Message Bus pattern

[LeLibre] Synchroniser ses contacts et agendas avec Radicale

Si vous disposez d’un serveur dédié et que vous souhaitez conserver la main sur vos données, il existe des solutions simples d’utilisations et libres.

Après plusieurs essais (pour partie infructueux), j’ai choisi de parler de Radicale.

Ce projet open source vise à disposer d’un serveur hébergeant vos agendas, contacts, tâches, … et accessibles via le protocole CalDAV.

Cela permet d’avoir une source centralisée pour tous ses contacts et agendas et de les partager sur son PC, smartphone, …

Radicale, bien qu’incomplet par rapport au protocole CalDav se veut simple d’installation et d’utilisation.

Installation :

Via pip, l’installation se fait simplement :

(Si python ou pip n’est pas installé) :

Voilà c’est installé ! L’avantage principal est de ne pas avoir besoin de base de données comme pour DAViCal.

Configuration :

L’installation est fonctionnelle avec les paramètres par défaut. Cependant, nous allons ajouter à cela un peu de sécurité et de confort d’utilisation.


Nous allons utiliser une authentification avec mot de passe crypté via BCrypt.

Installation des librairies :

Si comme pour moi l’installation ne fonctionne pas avec une erreur sur ffi.h, installer libffi :

Créez un nouvel utilisateur :

et tapez votre mot de passe

Config Radicale

dans un fichier ~/.config/radicale/config, on ajoute :


Pour lancer automatiquement le service au démarrage, créer un script dans via

et coller :


Créer un service dans /etc/init.d/radicale :

Ajouter les droits d’exécution :

et ajouter la commande au démarrage :

Et voilà ! Pour créer des calendriers, carnets de contats, … rendez-vous sur http://monServeur:5232, vous devriez accéder à l’interface suivante :


Il suffit alors de créer l’objet désiré et de récupérer l’adresse de l’agenda dans son client (Evolution, Thunderbird, DAVDroid ou autre) pour avoir accès au calendrier partagé !

Default select option in Angular 5

Hi everyone,

For this first post we’ll be working on selecting a default option on select menu with Angular 5.

But first, and as you may know, to select an option with HTML only, you just have to use ‘selected’ attribute on your option to get it selected :


When working with Angular, you can show users simple string values but interact with your model in an object way.

Let’s take a simple example. Imagine you retrieve a keyboard layouts list from an API, a constant or whatever data source. You want to display the default keyboard user previously chose.

Simple select within a form :

In component file ;

This way select value binds to keyboard variable. However this is not enough for Angular to select the correct option.

To achieve this you have to implement a custom function that allows to compare your model with loop current value and determine whether option should be selected or not.

Indeed to compare object, Angular compares their identity. Thus two objects that come from a different source can have same data but different identity.

This directive called SelectControlValueAccessor is available with module ‘@angular/foms’ imported.

It can be used on a select within a form element via attribut :

As shown above, function compareFn simply returns a boolean, true if both objects are equals, false if not.


Don’t hesitate to leave a comment if this article was useful to you !