Category:

Dev

Ionic 4 + Angular 7: Checking whether the generic parent of a component is the active page

There’s no straightforward way yet in getting the parent component of a component via dependency injection without knowing the type of the parent component. This poses a problem if you want your component consumed by many different types of parent components.

A common scenario where this problem occurs is an Ionic 4 app with several pages that use so… Read more

Emulating a POP/IMAP/Activesync mail box for a single domain with Mailgun and Outlook

Skip to the steps

With the termination of Zoho free tier access to POP/IMAP/Activesync services, choices for simple, free inboxes and an outgoing SMTP server for your domain have become virtually non-existent.

A common scenario when hosting a small-scale web service under a domain is to handle registrations by sending out automated mails via the free out… Read more

ngx-translate: translate your JSON file to other languages

For Angular 2/3/4/5/6/7 developers, use this gadget to translate your en.json file.

This is relevant for developers that use @ngx-translate/core similar to the following in app.module:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

@NgModule({
/* ... */
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: Translat
Read more

Ionic 4 Beta: what it means if your Ionic component is not “hydrated” (visibility: hidden rather than visibility: inherit)

Since documentation and StackOverflow answers are currently sparse for Ionic 4, this tip may hopefully help you save a lot of time debugging if you are transitioning a project from Ionic 3 to Ionic 4.

If you discover one of your components is missing the “hydrated” class, a class programmatically applied to Ionic 4 components at run-time (your … Read more

Extortion e-mail scams are on the rise again: the importance of using unique passwords

Have you been getting spam mail that looks like this recently?

I know [password redacted] one of your password. Lets get directly to the purpose. You may not know me and you are most likely thinking why you’re getting this e mail? No one has compensated me to check about you.

Well, I installed a software on the xxx vids (sex sites) web-site and you know what

Read more

Angular 2/3/4/5: change detection on data-bound array push/unshift, pop/shift or splice

Suppose you have a component and have bound an array variable to an input property, like so:

<myComponent [arrayInput]="myArray"></myComponent>

Suppose you were to modify the contents of myArray via its standard array methods such as push(x), pop(), unshift(x), shift(), or splice(i, c). You may notice that myComponent does n… Read more

Solr 7: match exactly one TextField, fuzzy search the others

Disclaimer: I just recently started tinkering with Solr, so this may not be the “textbook” solution to this problem — but it works!

Say you wish to categorize your documents in a hierarchy. For example, you want to have a pet search engine, and you want to bucket the pets accordingly:

Dog (mammal)

Dogs are domesticated mammals, not natural w

Read more

How to replace the default search icon with a custom Ionicon in an Ionic 3 Searchbar

The icon for the Ionic 3 Searchbar is a hard-coded SVG written in SCSS rules. In particular, they are saved under the following variables:

$searchbar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'>
  <path fill='fg-color' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C
Read more

Hack to make Ionic 3 Menu component static (keeping the menu open and ignoring backdrop and content clicks)

The current behaviour of the Ionic 3 Menu component doesn’t allow the menu to stay open if the user interacts with other content in the app.

There are a couple of reasons to want a static menu, with the content still in full view:

  • Desktop web apps have sufficient space to show a menu and content simultaneously and we want a drawer to mimic a SplitPane
  • Mobile
Read more

Subtle Ionic 3 gotchas: don’t import and push the page module you are trying to load lazily

With a page you want to be loaded lazily and not eagerly, don’t fall into the subtle trap of trying to push the module onto the stack rather than just the name of the module as a string.

In your page you wanted to have lazy loading, you probably added the decorator (or ionic CLI may have generated this for you):

@IonicPage()

right before:

@Component

In these … Read more