Drupal & Angular blog content, code snippets and tutorials.

A transform pipe to highlight and replace text in an Angular 13 template

I had this project where search results coming from an API service needed to be highlighted.

How does npm packages versioning work with caret and tilde

Something that can be interesting: how versioning for npm packages works?

How to save CSV data with Filesaver js in TypeScript

I had a web service giving me CSV results that needed to be downloaded in a TypeScript environment as a CSV file, here is how I did it

Programmatically saving a file in Drupal 8, 9 & 10

This tutorial code shares how to share a file entity programmatically in Drupal.

How to put a Drupal site in maintenance mode with drush

If you are running a devOps system, you can put your sites in maintenance mode like this:

The best ways to learn Drupal

Learn Drupal from basic to advanced level.

Drupal automatic updates is coming

Drupal automatic updates is a feature that will automatically install new Drupal core updates when they are released. This can be done without you having to lift a finger!

How to fix ReferenceError: exports is not defined TypeScript

If you are getting the error for code that runs in the browser, try defining a global exports variable above the script tags that load your JS files.

How to get items from local storage with TypeScript, manipulate and resave

an example of a print basket: how to get the items and re-save them

How to loop over field items in twig file in Drupal

If you want to use a looping functionality in x.html.twig​​​​​​​ you can use the following:

How to create an array of objects in Python

When learning new languages you always want to know the typical things like arrays, sorting, etc. Today I was messing around with some Python and noticed I had to look up how to create an array of objects.

Three ways to convert a string to number in TypeScript

Exactly like in JavaScript, you can use the parseInt or parseFloat functions, or simply use the unary + operator:

My thoughts on Github Copilot for Drupal development (screencast)

like many I tested out GitHub co-pilot and I specifically tested it out for drupal development now would this be useful as a drupal developer will this boost my productivity, in short, yes I would definitely say so

Set auto focus to ionic input in Ionic 6 and Angular 13

I stumbled upon setting focus to an element in Ionic. As it appeared, there is no directive to use (anymore) to autofocus an ionic input.

Accessing and setting values of field properties of entities in Drupal

Here are some ways to access field properties on entities in Drupal

EntityQuery access check will be enforced in Drupal 10

Until Drupal 9.2, if ::accessCheck() is not called then the query would default to checking access, i.e. behave as if ::accessCheck(TRUE) had been called.

How to add HTML to Drupal Messenger API service

Drupal now has a messenger service, powered by the class Drupal\Core\Messenger\Messenger. Here is how you can add HTML to the message

How to: cacheable JSON response in Drupal 8, 9 & 10

In my book Learning Drupal as a framework, we learn some nice things about cacheable dependencies. Recently I had to provide a JSON controller with cached data.

How to add direct share links to your Drupal page in page.html.twig

The following snippets can be used to get direct share links to Facebook, Twitter and LinkedIn in your page.html.twig

Get a link field url and value in Twig for both internal and external links

Drupal's link field is quite generic. You can both add internal paths as external links. Here is how get the correct values in twig.

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.