CODEWITHSUNDEEP
angularionic-frameworkionic3angular5
Lasithds
Lasithds

Reputation: 2281

Ionic page add common class for few selected pages

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?

Upvotes: 1

Views: 1154

Answers (3)

tanish shetty
tanish shetty

Reputation: 16

You could even go for:

    @Component({
           selector: 'app-nthpage',
           templateUrl: './nthpage.page.html',
           styleUrls: ['./nthpage.page.scss', '../firstpage/firstpage.page.scss'],
    })

Upvotes: 0

Lasithds
Lasithds

Reputation: 2281

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;
  }
  ...
}

Upvotes: 2

Adrian
Adrian

Reputation: 1587

You can use @extend from sass.

You create the base style.

.basePage{
  background-color: $bgcolor;
}

Then extend it to your pages.

nthPage{
  ion-content.content{
    @extend .basePage;
  }
}

Do note though that your base class should be visible to the sass file where nthPage resides. So you might want to put your base class in a base.scss and import it to your nthPage.scss.

More info here.

Upvotes: 2

Related Questions