Ionic page add common class for few selected pages

Issue

I have few pages in my application that requires a certain styles to be applied to the page. Currently I have added the same css to the selector class.

firstPage.scss

firstPage{
  ion-content.content{
     background-color: $bgcolor;
  }
}

nthPage.scss

nthPage{
  ion-content.content{
    background-color: $bgcolor;
  }
}

If I don’t want to use the same selector across all those pages is there any other method in angular or ionic which allows me to append a common class attribute along with the unique selector? Probably from the @Component or @IonicPage methods?

Solution

I found the perfect solution.

Angular didn’t append a class to the selector when I tried something like this.

@Component({
  selector: 'page-my-page.common-page',
  templateUrl: 'post-ad-contact.html'
})

But it appended an attribute this way.

@Component({
  selector: 'page-my-page[common-page]',
  templateUrl: 'post-ad-contact.html'
})

Now I can append common styles to the common-page attribute instead of having to define for each page or extending each page with a common styles.

[common-page]{
  background-color: $mybg;
  .common-class{
    border: red;
  }
  ...
}

Answered By – Lasithds

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.