Interpolation {{item.number}} inside a CSS selector in Ionic/Angular

Hi guys! I have a problem which is pretty tricky, so please help me out :confused:

I have this item.number

I want to bind item.number as an interpolation in an Ionic CSS selector named page1

so, to use it in another .html file, I want to transform <page1></page1> to be: <page{{item.number}}></page{{item.number}}>

Unfortunately this does not work, so what’s the workaround? Thanks!

I’m fairly certain that the desired functionality is impossible. Angular just doesn’t really work that way.

I’m really confused as to what the use case would be here, so would it be possible for you to explain what you want in a larger sense so that perhaps we can come up with a different route?

Thanks Sigmund,
I have this also explained here: Html content inside an object value
Here also I wanna achieve the same thing basically
I hope it makes sense :slight_smile:

I made a simple schema explaining my need:

A simple list with the buttons and a string pointing to a page being lazy loaded pushed on rhe stack seems to come closest to what ypu want, imho

And no, i am not going give u code :grinning::grinning:

thanks, I will investigate what that is and how that works :slight_smile:

I have tried lazyloading as in this tutorial:
but I cannot understand why interpolation doesn’t work not even now :frowning: Please help

and here is the error:

Interpolation doesn’t work in TypeScript/JavaScript.

You’d instead do the Irish tradition of using string concatenation.

this.navCtrl.push("About1" + item);

no luck :frowning:


but console.log does show that it should actually work:

Do you have a page called About1Page?

indeed I have:

Alright, cool.

Do you have a AboutPage1.module.ts file?

about1.module.ts (export class About1PageModule) actually since the export class of about1.ts is About1Page


What does the ionic info command output?

ionic info

cli packages: (C:\Users\alexdesk\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : not installed

local packages:

@ionic/app-scripts : 3.1.5
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2


Node : v8.9.1
npm  : 5.5.1
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set


backend : pro

I would like to suggest you to setup a new small project with 2 lazy loaded pages and make that work\

And then compare stuff, especially in all module declaration

Also: try pushing the page not using dynamic string but static string “About1Page” to see if that works.

So build from a working thing and then expand slowly.

It is goingto be a nightmare debugging this way

I guess is time to declare this thread [Solved] because lazy loading actually can fix my need, so a big thanks to Tommertom & SigmundFroyd for your support!

So in conclusion, interpolation doesn’t work basically in this case since it produces an error:

Good to hear

And if u want to know more about interpolation, study the angular guide on it

It is basically a feature of the template engine of angular and as such only works there. (And hence obviously will throw errors/unexpected results when using its syntax in typescript, javascript c#, assembly prolog, lisp pascal, react xamarin and so on and sonon)

1 Like