Month: October 2018

Angular

NgSwitch Directive in Angular

Like ngFor and ngIf, ngSwitch is a built-in template directive. It behaves in a similar way as a JavaScript switch statement. Use it to include one of multiple possible element trees in the DOM. This post covers Angular 2 and up <div [ngSwitch]="dietSelection"> <p *ngSwitchCase="'gf'">Gluten-free</p> <p *ngSwitchCase="'veg'">Vegetarian / Vegan</p> <p *ngSwitchCase="'paleo'">Paleo</p> <p *ngSwitchDefault>Standard diet</p> </span> […]

Angular

Introduction to Routing in Angular

The router in Angular 2+ makes it easy to define routes for your applications. Here are the steps to get started with basic routing in your apps: 1. Base tag If you create projects with the Angular CLI a base tag will be added by default in index.html, but you’ll want to add it yourself […]

Angular

Dependency Injection in Angular

Dependency Injection (DI) is a core concept of Angular 2+ and allows a class receive dependencies from another class. Most of the time in Angular, dependency injection is done by injecting a service class into a component or module class. Here’s for example how you would define an injectable service. Pay special attention to the […]

Angular

Data Binding in Angular

Data binding is a core concept in Angular and allows to define communication between a component and the DOM, making it very easy to define interactive applications without worrying about pushing and pulling data. There are four forms of data binding and they differ in the way the data is flowing. This post covers Angular […]

Angular

*ngIf Directive in Angular 2

NgIf is a built-in template directive that adds or removes parts of the DOM depending on if the expression passed to it is true or false: <div *ngIf="userHasPet"> {{ user.pet.name }} </div> In the above, if userHasPet is true, then the div will be included in the DOM (it will be on the page), and […]

Html

State of Modern Component Styling

As new user interface component frameworks are created and old frameworks are replaced with emerging technologies, methods for styling those components must change with them. Long gone are the days of creating a simple HTML component and importing a simple CSS file with corresponding class names. Concerns such as style leaking, local DOM manipulation and […]

Angular

*ngFor Directive in Angular

NgFor is a built-in template directive that makes it easy to iterate over something like an array or an object and create a template for each item. This post covers Angular 2 and up Here’s a basic example of its use: <ul> <li *ngFor="let user of users">{{ user.name }}</li> </ul> This will output html that […]

Html

HalfStack 2016 Recap

This was my second year attending Halfstack and creating, as well as compèring (M.C.ed in American English), the JavaScript Pub Quiz. Who can argue with a conference in a pub? The promise of a single-track conference format and a lineup of great speakers is hard to beat. This year Halfstack delivered yet again. Ruth John (@Rumyra) […]

Angular

Creating Custom Pipes in Angular

Pipes in Angular 2+ are a great way to transform and format data right from your templates. Out of the box you get pipes for dates, currency, percentage and character cases, but you can also easily define custom pipes of your own. Here for example we create a pipe that takes a string and reverses […]

Html

Progressive Web App Summit 2016 Recap

I was lucky enough to attend the Progressive Web App Summit hosted by Google at the Theatre Amsterdam with two of my SitePen Colleagues. I was blown away by the quality of the talks, the speakers, the content and of course the venue and hospitality. Progressive Web Applications take advantage of new technologies to bring […]