Bird Proof Breadcrumb Navigation in Angular
In some web apps, breadcrumb navigation can be a user-friendly addition to reveal the user’s whereabouts, and to provide a path back home. So, how do we build such a breadcrumb in Angular? A breadcrumb path resembles your URL structure, but it’s often not the…
Testing RxJS observables
When it comes to testing RxJS observables, there are many aspects worth observing. How many events have been emitted? Has the stream completed yet? Did it result in an error? For advanced RxJS testing, RxJS Marble testing might be an interesting choice. Especially for asynchronous…
Enjoy off-the-shelf Angular Material tables!
Angular Material is a high-quality UI component framework for Angular. For example, its Table component has a lot of features including sorting and filtering data. However, this component also has some limitations (as well as solutions for those limitations). Some of the limitations are: Filtering…
2 years of Angular: lessons learned
Over the past two years, we have been working at Malmberg to build an amazing new education platform: Bingel. In this blog I like to talk about our adventures, mainly with Angular, and the lessons we learned. Bingel is a new platform for digital primary…
Welkom in de wereld van Progressive Web Apps
“An innovative new way to create applications for mobile devices” Apps die naadloos integreren in elk device. Niet te onderscheiden van ‘native apps’. Gebouwd met één technologiestack. Te installeren zónder afhankelijk te zijn van een app store. Klinkt fantastisch? Dat is het! En het is…
Progressive Web Apps – Meetup
Op 27 september 2018 organiseerde Malmberg een meetup. Tijdens deze bijeenkomst stond het thema Frontend Development centraal. Onze collega Dirk Luijk was gevraagd zijn ervaringen te delen en hield twee presentaties. Hij hield een talk over Progressive Web Apps (PWAs) en eentje over het onderhouden…
Sharing Angular modules like a boss
What forRoot and forChild have to do with lazy loading You just created a beautiful Angular component. Now, being the exemplary developer that you are, you want to share it with others. In Angular, you achieve this by moving it to a separate NgModule. The…
Drag ‘n Drop in Angular: Part 1 – The Draggable Directive
The first part of this series starts with the foundation: the draggable directive. This directive has only one responsibility: tracking the dragStart, dragMove and dragEnd events. Background To have the ultimate freedom, I recommend to stay away from the HTML5 Drag and Drop API. Of course, HTML5…
Drag and drop in Angular (new #tutorial series!): introduction
Remember using jQuery UI’s Draggable and Droppableplugins, for building drag and drop features in web applications? Awesome, wasn’t it? Now, what if we could implement drag and drop functionality just as easily in Angular projects? Over the last months, I have been improving my drag and drop implementations…
Optimize your Angular app using trackBy #tutorial
This blog is part of an Angular instructional / tutorial series, please find the first edition here: Angular structural directives demystified. Optimize your Angular app using trackBy When rendering lists using Angulars ngFor directives, objects are compared by reference. This is fast, but can result in unwanted DOM manipulations. Luckily,…