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

Ionic Framework ionic-v3
1

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
image

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!

2

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?

3

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:

4

I made a simple schema explaining my need:
image

5

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:

6

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

7

I have tried lazyloading as in this tutorial: https://www.youtube.com/watch?v=h4qrhJFeudA
but I cannot understand why interpolation doesn’t work not even now :frowning: Please help

image
image.png1311×1008 108 KB

and here is the error:
image

8

Interpolation doesn’t work in TypeScript/JavaScript.

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

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

9

no luck :frowning:

image
image.png1831×899 109 KB

image

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

image
image.png867×109 12.8 KB

10

Do you have a page called About1Page?

11

indeed I have:

image
image.png1830×895 110 KB

12

Alright, cool.

Do you have a AboutPage1.module.ts file?

13

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

image
image.png1007×913 91.2 KB

14

Hmmm.

What does the ionic info command output?

15

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

System:

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

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro
16

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

17

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!

image
image.png847×701 54.2 KB

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

18

Good to hear

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

https://angular.io/guide/template-syntax

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