facebook-squared twitter-squared rss-squared gplus-squared

Things to consider when renaming Ionic Page

Written by on 11 January 2018

Thursday

11

January 2018

0

COMMENTS

Ionic comes with the concept of pages, they are components that takes up entire visible area. Recently I run into program that consumed a lot of my precious time.

Ionic tip for renaming pages

Generally when you create an ionic page using ionic cli (ionic generate page Features), a folder is created with the name of your page along with three files inside it. Their name is delimited with hyphen “-”

These files are:
1. features.html
2. features.scss
3. features.ts

Now the features.ts has the following content

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-features',
  templateUrl: 'features.html'
})
export class FeaturesPage {

  constructor(public navCtrl: NavController) {

  }

}

and our features.scss got

page-features{

}

Last week, For some reasons I had to change the name of the page. To change the features bit to widgets every where. I changed the file names and molded features.ts accordingly. But, my css failed to change effect.

It took hours of fiddling, curiously going through every file just to find the culprit. Finding a problem should be easy in css right when certain change doesn’t takes place. It might be specifity or your css might not get loaded.

If you look at following code snippet, all of my scss is scoped inside a selector page-features. Which can’t be found anywhere in the app because now it’s page-widgets

page-features{ /*<-- doesn't exist anymore */
/*.......*/
}
page-widgets{ /*<-- something I am looking for
/*........*/
}

The root element for my widgets page is page-widgets so all my styles shouldn't be inside page-features. This is the point that I missed. That's because the entire page is enclosed in page-widget is selector.

So what I have learned from that experience is that, that's how css is scoped in Ionic. Things are scoped little differently in Angular. A random string something like _ngcontent-c3 is added to each of your css selector.

That's it for today, correct me by participating in comments.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: