from Esslingen, Germany...

We are programmers from Esslingen and we are sharing our experience with:
October 5, 2018

Angular 2 – Set Class of parent element with @HostBindings

With the @HostBinding() annotation, Angular gives you a useful tool to handle manipulations of css classes of parent Elements. The advantage is quite clear, the required logic remains in the components class and is not set in the template file. This makes it easier to test and improves the readability of the template file. In addition, it is the only way to set the CSS class of the host element
Read more…


3 Comments

Can Kattwinkel

Entwickler bei thecodecampus

July 26, 2018

Locally serving the build distribution of an Angular SPA

tl;dr Use Node Package local-web-server and its command ws with the spa flag like this: ws –spa index.html While developing an Angular based SPA usually you will use the Angular CLI as build too. The CLI has an integrated development server which is able to handle client-side routing. So whenever a reload happens and you’re on a route, the browser and the application will stay on this route after the
Read more…


No Comments

Philipp Burgmer

Entwickler bei thecodecampus

July 18, 2018

Angular, Preserving Query Params and Google AdWords

… and how all this leads to an incorrect source of traffic in Google Analytics and incorrect conversion attribution.   The situation is as follows: On www.thecodecampus.de we run an Angular 6 page. We advertise our product with Google AdWords. If a visitor comes via Google AdWords, the URL is appended with a glcid and several campaign parameters as query params. This data is important for tracking, as Google Analytics determines
Read more…


No Comments

Can Kattwinkel

Entwickler bei thecodecampus

The ‘this’ context of type ‘void’ is not assignable to method’s ‘this’ of type ‘Observable<{}>‘.

If you are experiencing this error – usually something with your RxJS imports is wrong. So you should go through them manually or simply delete all imports from RxJS in the corresponding file and let the IDE generate them again. Something broken could look like this:

Better working might be:

What is happening? RxJS switched from monkey patching to the import of pipeable operators (also known as lettable operators).
Read more…


No Comments

Can Kattwinkel

Entwickler bei thecodecampus

February 12, 2018

Angular Universal XMLHttpRequest is not defined with HttpClient

I’ve recently had an extremely weird application behavior. The application is this server side rendered Angular page.  I discovered that the router outlet for this page was empty on the SSR result. I hadn’t noticed before since the site was bootstrapping really fast even without SSR. A quick look into Sentry – which holds our server logs  – revealed the cause. I got the following error: XMLHttpRequest is not defined This
Read more…


No Comments

Can Kattwinkel

Entwickler bei thecodecampus

February 9, 2018

Angular CLI: Add Sitemap.xml and Robots.txt File

As a developer you may get the task adding a Sitemap and a robot.txt to your Angular project. This is quite easy if it is being built with Angular CLI. Copy the files next to the favicon.ico  into the /src  folder of your Angular project.

  Now open up the angular.json file in the projects root folder with an editor and add the two files inside the assets section, as
Read more…


4 Comments

Dragan Zuvic

Entwickler bei thecodecampus

February 7, 2018

Angular Universal Handle 404 and Set Status Codes

When working with Angular Universal we can implement a full-fledged server. Of course, this does not only include for example to display a 404 page for incorrect urls but also setting the correct status code. So that for example search engines and crawlers in general can process the result correctly. Angular itself allows us to easily create a 404 page via the router package. However, this is to be regarded
Read more…


12 Comments

Can Kattwinkel

Entwickler bei thecodecampus

November 13, 2017

Getting started with Firestore and AngularFire2

A few weeks ago, Google has released its new solution for building scalable cloud databases — the Cloud Firestore. It has some nice improvements in comparison to their previous database (which used to be called Firebase but is now referred to as ‘Realtime Database’), like better data structuring and a more powerful querying API. In this post I’m going to go through everything you need to get started with Cloud Firestore
Read more…


1 Comment

Can Kattwinkel

Entwickler bei thecodecampus

November 2, 2017

Material 2: Sticky Footer with Mat Sidenav

A very common use case for the sidenav of Material 2 is the use in a layout with a sticky footer. Unfortunately, the documentation of the Mat-Sidenav does not show how to do this best. But that’s not a big deal, because you can achieve your goal quickly if you know how to use Flexbox. We assume that routing is used. In addition to the sticky footer, we want to make sure
Read more…


7 Comments

Can Kattwinkel

Entwickler bei thecodecampus

Angular Serverside Validation with Hibernate and Redux

What is this article about? If you develop a web application with Angular, sooner or later you will run into the following problem: Where will the data generated by the client be validated? Client side validation is included in Angular, and gives the user a fast feedback about the correctness of his data. This is a standard in today’s web application. As most Angular Apps are running against a server
Read more…


No Comments

Jan Blankenhorn

Entwickler bei thecodecampus