Color Options

Color options in loklak media wall gives user the ability to set colors for different elements of the media wall. Taking advantage of Angular two-way data binding property and ngrx/store, we can link up the CSS properties of the elements with concerned state properties which stores the user-selected color. This makes color customization fast and reactive for media walls. In this blog here, I am explaining the unidirectional workflow using ngrx for updating various colors and working of color customization. Flow Chart The flowchart below explains how the color as a string is taken as an input from the user and how actions, reducers and component observables link up to change the current CSS property of the font color. Working Designing Models: It is important at first to design model which must contain every CSS color property that can be customized. A single interface for a particular HTML element of media wall can be added so that color customization for a particular element can take at once with faster rendering. Here we have three interfaces: WallHeader WallBackground WallCard These three interfaces are the models for the three core components of the media wall that can be customized. export interface WallHeader { backgroundColor: string; fontColor: string; } export interface WallBackground { backgroundColor: string; } export interface WallCard { fontColor: string; backgroundColor: string; accentColor: string; }   Creating Actions: Next step is to design actions for customization. Here we need to pass the respective interface model as a payload with updated color properties. These actions when dispatched causes reducer to change the respective state property, and hence, the linked CSS color property. export class WallHeaderPropertiesChangeAction implements Action { type = ActionTypes.WALL_HEADER_PROPERTIES_CHANGE;constructor(public payload: WallHeader) { } } export class WallBackgroundPropertiesChangeAction implements Action { type = ActionTypes.WALL_BACKGROUND_PROPERTIES_CHANGE;constructor(public payload: WallBackground) { } } export class WallCardPropertiesChangeAction implements Action { type = ActionTypes.WALL_CARD_PROPERTIES_CHANGE;constructor(public payload: WallCard) { } }   Creating reducers: Now, we can proceed to create reducer functions so as to change the current state property. Moreover, we need to define an initial state which is the default state for uncustomized media wall. Actions can now be linked to update state property using this reducer when dispatched. These state properties serve two purposes: Updating Query params for Direct URL. Updating Media wall Colors case mediaWallCustomAction.ActionTypes.WALL_HEADER_PROPERTIES_CHANGE: { const wallHeader = action.payload;return Object.assign({}, state, { wallHeader }); }case mediaWallCustomAction.ActionTypes.WALL_BACKGROUND_PROPERTIES_CHANGE: { const wallBackground = action.payload;return Object.assign({}, state, { wallBackground }); }case mediaWallCustomAction.ActionTypes.WALL_CARD_PROPERTIES_CHANGE: { const wallCard = action.payload;return Object.assign({}, state, { wallCard }); }   Extracting Data to the component from the store: In ngrx, the central container for states is the store. Store is itself an observable and returns observable related to state properties. We have already defined various states for media wall color options and now we can use selectors to return state observables from the store. These observables can now easily be linked to the CSS of the elements which changes according to customization. private getDataFromStore(): void { this.wallCustomHeader$ = this.store.select(fromRoot.getMediaWallCustomHeader); this.wallCustomCard$ = this.store.select(fromRoot.getMediaWallCustomCard); this.wallCustomBackground$ =…