Drupal & Angular blog content, code snippets and tutorials.

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.

0 views after an hour with a new account on Tiktok?

Tiktok is an amazing algorithm allowing you to reach a big audience with creative videos. After inspecting it for a year I started creating videos on the platform.

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.

Drupal and PHP 8: everything you need to know

Drupal 10 (release already in June 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.

Creating twig views template suggestions for a custom entity

I had this views field in a view that renders custom entities. Unfortunately, the suggestions do not come out of the box. Here is how to add them.

Comparing two dates in drupal the correct way

Comparing dates is a common action when programming. But you could have side effects mixing UTC and timezones... This snippet shows you how to do it the correct way.

Solve blurry text or wide font in ionic buttons

I've stumbled upon this issue on every ionic project so I'm logging it here.

Render a view with contextual filters programmatically in Drupal 9

A snippet of how to render a view inside a controller.

How to add class to Router link when active in Angular

Use the following to add an active class to a menu item or active link when you are visiting the exact page:

How to use HTML markup in hook_mail in drupal 9

I found a problem while sending confirmation e-mails. My HTML was escaped in translation strings. This fixed it.

How to check if a node entity is a newly save one

When working with entity forms I discovered this interesting piece detecting whether an entity is a newly saved one.

Directly get title of a referenced entity in Drupal 8 or 9

Entity references are common practice in drupal. With this snippet you can directly get the title of a referenced entity.