CODEWITHSUNDEEP
nativescriptangular2-nativescript
Colin Skow
Colin Skow

Reputation: 1006

How to style individual pages in Angular NativeScript?

I'm building a NativeScript app with Angular2 and the and I want to style each Page differently with a unique background image, etc. I cannot target the "Page" element in the individual component.css files, but I can target Page in the master app.css file. The problem is that sets the style for every single page. I want them to be unique.

The hack I have figured out now is to use this.page.setInlineStyle('background-color: purple;'); inside the ngOnInit() function in each component.

Is there a way to simply target the pages from individual routes from the app.css file?

Upvotes: 0

Views: 1369

Answers (2)

Donovant
Donovant

Reputation: 3161

It's working for me (in NativeScript), I usually do like that in Angular for web:

/deep/ Page {
  background: #whatever;
}

Upvotes: 1

TJ VanToll
TJ VanToll

Reputation: 12704

My preferred approach is to get a reference to the <Page> in an ngOnInit() handler, and to apply a CSS class name that I can use as a styling hook in my app.css file. So for example:

// my-page.component.ts
import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({ ... })
export class MyPage implements OnInit {
  constructor(private page: Page) {}
  ngOnInit() {
    this.page.className = "my-page";
  }
}

/* app.css */
.my-page {
  background-color: yellow;
}

I do this in the NativeScript Groceries sample if you’re looking for a fully-functional solution. See https://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa5ce7b812e22eac5/app/groceries/groceries.component.ts#L36 and https://github.com/NativeScript/sample-Groceries/blob/9eb6fea66e3912878815b86aa5ce7b812e22eac5/app/app.css#L7-L12.

Upvotes: 3

Related Questions