• Apr 11, 2017

  Using require and transclusion in Angular1 components

  When creating a ‘select/dropdown’ component we need to pass a list to the component which it then uses to display the available options for the user to select. The simplest way to do this is to pass a array in the component binding, which it then internally repeats and fires some event when the user chooses a option. In these examples our select is called dropdown <dropdown options="['add','edit','delete']" on-option-select="onOptionSelect(selectedOption)"></dropdown> The limitation on this approach is...
• Apr 2, 2017

  Google login with angularfire2

  This is a specfic use case of firebase, it took me a while to setup myself so I thought it might be worth sharing. Assuming that we already have angular2 setup we want to install angularfire2 npm install firebase angularfire2 --save Next assuming that we already have a firebase project setup. In the root app module we want to initialize our firebase project import { AngularFireModule } from 'angularfire2'; const firebaseConfig = { apiKey: "...",...
• Mar 24, 2017

  Angular 2 Icon System

  Here is the “Angular Icon System” rebuilt for angular 2. Converting it to angular 2 did provide some syntactic sugar, the component otherwise remains mostly the same. Link to Plunker example svg-icon.component.ts import { Component, OnChanges, Input } from '@angular/core'; import { NgStyle } from '@angular/common/index'; @Component({ selector: 'svg-icon', template: `<svg class="icon" [ngStyle]="svgStyle"> <use attr.xlink:href="#"></use> </svg>`, styleUrls: ['./svg-icon.component.css'] }) export class SvgIconComponent implements OnChanges { @Input() iconName: string; @Input() iconSize: number; svgSymbolId: string; svgStyle: object;...
• Mar 21, 2017

  Angular Icon System

  This is a example of the angular icon system that I use, it’s aim is to keep icon naming consistent and the html needed to generate a icon small. Displaying a icon using SVG symbols A prerequisite for the icon system is that every icon has a unique name. The icon system relies on a single SVG with multiple symbols, we then <use> the symbol in one or more places. This SVG is prepended to...
• Mar 14, 2017

  Color Organization

  Keeping colors consistent across an application is difficult, here are some patterns that I use that help with consistency. The syntax in the code examples is in Sass. Variables When I need a new color, I begin with assigning it as a global sass variable. Another option would be to use a sass map for colors, making looping possible (I am considering changing to this approach). The basic building block for the color system is...

subscribe via RSS