Drupal, Typescript, Angular and Midjourney blog content, code snippets and tutorials.

How to check if local storage item exists in TypeScript

This is a rather easy one. I was adding my filtering values in my local storage and had to check if a "library" key existed.

How to: install an existing Drupal site on Lando

This tutorial explains how to install an existing Drupal 9 website locally with Lando.

A list of free resources for creators

Here is a list of free software resources to use as a creator!

Tutorial: how to do an excel download of objects in Typescript

I was doing this project with a little excel download in typescript, and figured it would be great to share it.

How to fix error upgrading to Angular 13: unhandled exception occurred: Cannot find module 'webpack'

I got this error upgrading from Angular 11 to Angular 13. This is the fix.

How to know if a user is logged in in page.html.twig in Drupal

This is quite an easy one. You get the following variables available in page.html.twig:

How to get entity reference value and link to it in a paragraph

I had this use case where I had to show a label and link to another content type from within my paragraph. Because the theming was specific, I had to get the label and link in twig

How to: padding left and right in Bootstrap 5

Bootstrap 5 is quite a bit change in comparison with Boostrap 4. Here some snippets to do padding.

How to do a for loop in Twig PHP

This is the way to do a "for" loop. We are going to loop over an array of Node objects of type 'sector'

How to fix error TS7053: Element implicitly has an 'any' type because expression of type 'can't be used to index type '{}'

I had the following problem in TypeScript: I had to add an object with an array and key inside another object:

How to loop over config file values in Drupal

I had this use case in my theme, where I wanted to expose a bunch of settings to my page.html.twig. Typical things would be social media links. Here is how I looped over config file values, preventing me to write a lot of lines:

How to set the theme svg logo in a Drupal theme

In Drupal 8, the default logo needs to be a SVG file. Add this to your theme like this: themes/custom/mytheme/logo.svg.

How to create a custom Drupal theme with Bootstrap 5 dependency in 4 steps

Tutorial on how to create a Drupal 9 & 10 Bootstrap 5 integration with npm

Useful developer settings for Drupal: how to

So if you are building in Drupal > 8, you can have settings in the database (coming from configuration yaml files). BUT, you can also hardcode these in your settings.php file. These will always override the settings in the database. 

How to fix Drupal\Component\Plugin\Exception\PluginNotFoundException: The "fakeobjects" plugin does not exist. Valid plugin IDs for Drupal\ckeditor...

Lately I was updating some Drupal websites and suddenly CKEditor was broken. It seems like it now needs its libraries from separate libraries folder instead of shipped with the module. Here is how I fixed it. I added the following packages to composer.json:

How to add translation with parameters in Angular template

When using angular core's translation mechanism, the translate pipe is our friend in the template. But what if we have dynamic parameters?

How to solve error TS7031: Binding element 'id' implicitly has an 'any' type.

This error occurred in my Angular app fetching IDS from an observable. How to solve error TS7031: Binding element 'id' implicitly has an 'any' type.

How to remove padding inside Ionic 5 button

I expected a button with no padding on the left and the right. Because when you look at the CSS of "ion-no-padding" in node_modules/@ionic/angular/css/padding.css, it says:

How to cast a string to a Number in Typescript

I had this use case where I got data from an API that gave me an id in a string format. 

How to get the index in an *ngFor loop in Angular template

I had this problem looping over an array possibly larger than 10 items. But I only had to show 10. This snippet solves this problem.

How to vertically align the slot icon to the top in an Ionic 5 item

Ionic is a great UI asset library in cooperation with Angular. Lastly, I stumbled upon an issue where I need to vertically center my <ion-icon> component to the top position.

How to find object with id from array of objects and manipulate it in TypeScript

The solution (one of the possible solutions) is to find the index with findIndex method and then manipulate the object in the original array of objects with that index

Get ion-toggle value in Ionic5 and Angular 12

There are use cases on when not to use ReactiveForms. In this case, I have some ion-toggles with versions of a book. I just want to use the value of the toggle in my function and whether is set to false or true.

Fixing the reactive forms NG0100: ExpressionChangedAfterItHasBeenCheckedError or zone.js Angular error with ng-recaptcha or angular-recaptcha3

I was stuck quite long with errors while implementing a ReCaptcha with Angular. I finally was able to fix this annoying console error.

How to use functions inside a switch statement in TypeScript

Personally, I like the readability of switch statements. Here is how to include functions as well in TypeScript.

How to upgrade Drupal to PHP 8 with Composer

Drupal 10 (release end 2022) needs PHP 8. It will not be possible to run Drupal 10 on PHP 7 or earlier.

Single-line if statements in TypeScript how to

I'm tired of these old-school single-line statements and looked up one-line solutions. The following one is pretty clean in my eyes

How to create a patch for a drupal module that is not in version control [blog + screen cast]

The following use case can occur when developing drupal: you want to patch a module, but it is a contrib module that is not in version control (it is ignored by git and gets downloaded on build). Therefore you can not use the standard GIT commands for creating a patch.

How to check if two arrays of objects are identical in TypeScript

Comparison of objects is something we have to do often. Lodash is a good partner for this!

How to know if you have to use the constructor or ngOnInit in Angular?

I came to the point that I did not know when to use the constructor or ngOnInit. I had this Observable not giving me data until I reached the NgOnInit function. 

How to check for code deprecations in Drupal

Since Drupal 8, the community is actively updating the source code. Deprecations are something to deal with. This blog post shows you how to monitor your code.

Add bulk redirects with an EventSubscriber in Drupal 9

We know the Redirect module is an awesome way to create redirects for individual paths. But after a migration I needed to do some typical redirections.

Theming hooks for a custom entity

These snippets show you how to add hooks in order to generate twig files like mymodule/templates/my-entity--full.html.twig

How to set formControl default value but prevent to affect observable subscription

How to not subscribe to form changes when you set the default value via the ReactiveForms API

How to use translations with variables in Angular with ngx-translate

Translations are an important part of software when having a multilingual site. This snippet shows you how to use variables inside translations

How to use translations in a Angular Ionic Toast notification

Toasts are a very dynamic way of notifying your users. Here is how to translate them.

How to add classes to link fields in twig

In the following examples, I loop over a tag field and set a link with classes 

Ho to check if a field is empty in Drupal 8

A common task in custom coding is checking whether a field had a value. This snippet helps you with that.

How to use bundle classes in drupal 9 & 10

Bundle classes have arrived! In my opinion a major change to drupal and the way we will do theming. Introduced in branch 9.3.x.

Remove padding around ion-item in Ionic 5

Ionic is great because it comes with batteries included. Nevertheless, we always need some customization in the layout.

Disable hover color on ion-item in Ionic 5

Ion-items are a nice way of showing lists. The default behavior has some downsides, like a hover color.

How to render button with class from Route in drupal 8, 9, 10

With the following snippet you can create a link or button with classes from a route.

Five ways of using the path twig function for route links in drupal 8, 9 or 10

Linking to routes in Twig has become much easier since the release of some updates in Drupal 8. Here are 5 snippets that help when linking to internal routes.

How to use entityQuery Exists condition with entity reference

This snippet returns TRUE or FALSE if an entity has a filled-in value on a entity reference on field_winner field.

How to pass variables to html render arrays with FormattableMarkup in drupal 8, 9 and 10

Mixing HTML with variables is common practice when developing custom applications. This snippet shows how to mix HTML and variables the correct way.

Rendering a node or entity single field only programmatically in Drupal 8, 9 or 10

You do not always want to render a full output or your entity. This useful snippet teaches you how to render a single field value output.

Link to a route in twig [Drupal 8, 9, 10]

You should never hardcode your URLs in drupal. They might change. Use the following generic method instead.

Get the url of an image in drupal 9 & 10 with an image style in twig

Sometimes you need the URL of an image in twig in order to use it as a background image or something. While there are ways to load them in twig, it is more appropriate to do this with a preprocess function. This makes your code more maintainable. 

Altering autocomplete results on entity references in drupal 9 & 10

The core autocomplete on entity references is not always satisfying. Sometimes authors need to know published status etc. This blogpost guides you through all the steps.

Render output of a node programmatically in drupal 9

There are use cases where you want the rendered output programmatically. This is different in drupal 9. This snippet shows you how to get it.