I believe everybody has heard of Web Components before. If not, read the introduction for example on webcomponents.org:

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

With Web Components we can define new HTML elements and use them on a website. If you hear of Web Components, you will also get in touch with Shadow DOM. Benefit of Shadow DOM is that we as developer can encapsulate styles and DOM.

If you found my article, I am sure you already…


Switch the design of your app with Ionic 4 and CSS variables

Ionic 4 uses CSS variables and we will use this technique to let a user switch the theme of an app. As you can see above, this is working really great. And in this article I will show you how to implement it.

The Basics: CSS variables

CSS variables (also known as CSS custom properties) can be used in plain css. It’s supported by all MODERN browsers (Firefox >31, Chrome >49, Edge >15, Safari). Internet Explorer doesn’t support CSS variables.

Now you can add inside your css styles for example the following:

:root {
--color: red;
}

A CSS variable always starts with …


There are a lot of questions related to Ionic 4 and the Lifecycle Hooks. There are new issues at the Ionic Github Repository where people complain that the Lifecycle Hooks are not working. So I will tell you in this article when the Lifecycle Hooks are running in Ionic 4.

Keep in mind: This post covers the package @ionic/angular— and so the combination of Ionic 4 and Angular. Ionic 4 will be available for other frameworks (like Vue), too (or use it standalone without any other framework).

For example:

When I navigate from the home to another route, the lifecycle…


My IQ Test app is based on Angular 6 and Ionic 4 now

Earlier this year, I created an IQ Test App based on Ionic 3 and Angular 4. Now a half year later I migrated the app from Ionic 3 to Ionic 4 and Angular 6. It’s a small-medium sized app and not a big one, but I needed around five days to migrate it.

What? Five days? If I only had to migrate from Ionic 3 to Ionic 4, it would be ready in one day. …


Add more colors to Ionic 4 expect the standard ones

How can I add more colors in Ionic 4 and use them as color in different components like the Button, Item and so on?

If you work with Ionic 4 the way how you add colors has changed. Ionic 4 uses CSS variables (a nice way if you ask me).

9 default colors in Ionic 4

Ionic has 9 default colors: Primary, secondary, tertiary, success, warning, danger, dark, medium and light. And the best: Ionic brings a Color Generator so you can easily change this default colors: https://beta.ionicframework.com/docs/theming/color-generator. Just edit the colors there and afterward import it into your variables.scssin src/themefolder. …


Make the header (toolbar) in Ionic 4 transparent

Ionic 4 will coming soon and I already working with it for months. Today I want to share how to make a header (exactly the toolbar) transparent. In Ionic 3 you only add the transparent tag to <ion-navbar> , but this is not working anymore.

PS: I will show you two concepts here — first making the toolbar transparent and second to fill the toolbar with a background color after the user scrolls down!

Step 1: Add the fullscreen attribute to ion-content

With the fullscreen attribute, the content will now moving under the header. …

Paul Stelzer

Angular and Ionic Developer / SEO / WordPress — Always looking for new challenges!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store