Customize the background color of body for seperate pages
up vote
0
down vote
favorite
So i am using angular 5 and i am trying to customise the background color of the body of the home page but not to allow that color to be passed to the next page.
Using ng-deep i have kinda got this working as it works if the user refreshes the page. So how do i stop the body color white being passed into the next page and have grey show without having to refresh the page
Thanks in advance
css angular typescript angular5
add a comment |
up vote
0
down vote
favorite
So i am using angular 5 and i am trying to customise the background color of the body of the home page but not to allow that color to be passed to the next page.
Using ng-deep i have kinda got this working as it works if the user refreshes the page. So how do i stop the body color white being passed into the next page and have grey show without having to refresh the page
Thanks in advance
css angular typescript angular5
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
So i am using angular 5 and i am trying to customise the background color of the body of the home page but not to allow that color to be passed to the next page.
Using ng-deep i have kinda got this working as it works if the user refreshes the page. So how do i stop the body color white being passed into the next page and have grey show without having to refresh the page
Thanks in advance
css angular typescript angular5
So i am using angular 5 and i am trying to customise the background color of the body of the home page but not to allow that color to be passed to the next page.
Using ng-deep i have kinda got this working as it works if the user refreshes the page. So how do i stop the body color white being passed into the next page and have grey show without having to refresh the page
Thanks in advance
css angular typescript angular5
css angular typescript angular5
asked Nov 9 at 16:25
Aidan Ward
126
126
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
You can access it from a component with:
export class HomePageComponent implements AfterViewInit
constructor(private elementRef: ElementRef)
ngAfterViewInit()
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'red';
It doesnt solve my problem as it still passes it onto the next page. that way every page now has a background of red. It seems to have a similar effect as ngdeep
– Aidan Ward
Nov 9 at 16:41
You have to implement it in only in your home-page component, not in the AppComponent sorry, I edited my answer. So the color will only be apply in the home-page component.
– Maarti
Nov 9 at 16:47
1
i placed it in all my pages thankfully it wasnt that much so solved the problem of passing it. This way i can have what ever color i want for each page. Thanks alot buddy, solved a week long problem ive been ignoring
– Aidan Ward
Nov 9 at 16:54
Good, just be careful that there are no conflicts (if you have multiple components in a page).
– Maarti
Nov 9 at 16:57
no worry about that :D. thanks again buddy
– Aidan Ward
Nov 9 at 17:06
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You can access it from a component with:
export class HomePageComponent implements AfterViewInit
constructor(private elementRef: ElementRef)
ngAfterViewInit()
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'red';
It doesnt solve my problem as it still passes it onto the next page. that way every page now has a background of red. It seems to have a similar effect as ngdeep
– Aidan Ward
Nov 9 at 16:41
You have to implement it in only in your home-page component, not in the AppComponent sorry, I edited my answer. So the color will only be apply in the home-page component.
– Maarti
Nov 9 at 16:47
1
i placed it in all my pages thankfully it wasnt that much so solved the problem of passing it. This way i can have what ever color i want for each page. Thanks alot buddy, solved a week long problem ive been ignoring
– Aidan Ward
Nov 9 at 16:54
Good, just be careful that there are no conflicts (if you have multiple components in a page).
– Maarti
Nov 9 at 16:57
no worry about that :D. thanks again buddy
– Aidan Ward
Nov 9 at 17:06
add a comment |
up vote
0
down vote
accepted
You can access it from a component with:
export class HomePageComponent implements AfterViewInit
constructor(private elementRef: ElementRef)
ngAfterViewInit()
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'red';
It doesnt solve my problem as it still passes it onto the next page. that way every page now has a background of red. It seems to have a similar effect as ngdeep
– Aidan Ward
Nov 9 at 16:41
You have to implement it in only in your home-page component, not in the AppComponent sorry, I edited my answer. So the color will only be apply in the home-page component.
– Maarti
Nov 9 at 16:47
1
i placed it in all my pages thankfully it wasnt that much so solved the problem of passing it. This way i can have what ever color i want for each page. Thanks alot buddy, solved a week long problem ive been ignoring
– Aidan Ward
Nov 9 at 16:54
Good, just be careful that there are no conflicts (if you have multiple components in a page).
– Maarti
Nov 9 at 16:57
no worry about that :D. thanks again buddy
– Aidan Ward
Nov 9 at 17:06
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You can access it from a component with:
export class HomePageComponent implements AfterViewInit
constructor(private elementRef: ElementRef)
ngAfterViewInit()
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'red';
You can access it from a component with:
export class HomePageComponent implements AfterViewInit
constructor(private elementRef: ElementRef)
ngAfterViewInit()
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = 'red';
edited Nov 9 at 16:48
answered Nov 9 at 16:32
Maarti
8581620
8581620
It doesnt solve my problem as it still passes it onto the next page. that way every page now has a background of red. It seems to have a similar effect as ngdeep
– Aidan Ward
Nov 9 at 16:41
You have to implement it in only in your home-page component, not in the AppComponent sorry, I edited my answer. So the color will only be apply in the home-page component.
– Maarti
Nov 9 at 16:47
1
i placed it in all my pages thankfully it wasnt that much so solved the problem of passing it. This way i can have what ever color i want for each page. Thanks alot buddy, solved a week long problem ive been ignoring
– Aidan Ward
Nov 9 at 16:54
Good, just be careful that there are no conflicts (if you have multiple components in a page).
– Maarti
Nov 9 at 16:57
no worry about that :D. thanks again buddy
– Aidan Ward
Nov 9 at 17:06
add a comment |
It doesnt solve my problem as it still passes it onto the next page. that way every page now has a background of red. It seems to have a similar effect as ngdeep
– Aidan Ward
Nov 9 at 16:41
You have to implement it in only in your home-page component, not in the AppComponent sorry, I edited my answer. So the color will only be apply in the home-page component.
– Maarti
Nov 9 at 16:47
1
i placed it in all my pages thankfully it wasnt that much so solved the problem of passing it. This way i can have what ever color i want for each page. Thanks alot buddy, solved a week long problem ive been ignoring
– Aidan Ward
Nov 9 at 16:54
Good, just be careful that there are no conflicts (if you have multiple components in a page).
– Maarti
Nov 9 at 16:57
no worry about that :D. thanks again buddy
– Aidan Ward
Nov 9 at 17:06
It doesnt solve my problem as it still passes it onto the next page. that way every page now has a background of red. It seems to have a similar effect as ngdeep
– Aidan Ward
Nov 9 at 16:41
It doesnt solve my problem as it still passes it onto the next page. that way every page now has a background of red. It seems to have a similar effect as ngdeep
– Aidan Ward
Nov 9 at 16:41
You have to implement it in only in your home-page component, not in the AppComponent sorry, I edited my answer. So the color will only be apply in the home-page component.
– Maarti
Nov 9 at 16:47
You have to implement it in only in your home-page component, not in the AppComponent sorry, I edited my answer. So the color will only be apply in the home-page component.
– Maarti
Nov 9 at 16:47
1
1
i placed it in all my pages thankfully it wasnt that much so solved the problem of passing it. This way i can have what ever color i want for each page. Thanks alot buddy, solved a week long problem ive been ignoring
– Aidan Ward
Nov 9 at 16:54
i placed it in all my pages thankfully it wasnt that much so solved the problem of passing it. This way i can have what ever color i want for each page. Thanks alot buddy, solved a week long problem ive been ignoring
– Aidan Ward
Nov 9 at 16:54
Good, just be careful that there are no conflicts (if you have multiple components in a page).
– Maarti
Nov 9 at 16:57
Good, just be careful that there are no conflicts (if you have multiple components in a page).
– Maarti
Nov 9 at 16:57
no worry about that :D. thanks again buddy
– Aidan Ward
Nov 9 at 17:06
no worry about that :D. thanks again buddy
– Aidan Ward
Nov 9 at 17:06
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229604%2fcustomize-the-background-color-of-body-for-seperate-pages%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown