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










share|improve this question

























    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










    share|improve this question























      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










      share|improve this question













      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 9 at 16:25









      Aidan Ward

      126




      126






















          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';







          share|improve this answer






















          • 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










          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













           

          draft saved


          draft discarded


















          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

























          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';







          share|improve this answer






















          • 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














          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';







          share|improve this answer






















          • 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












          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';







          share|improve this answer














          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';








          share|improve this answer














          share|improve this answer



          share|improve this answer








          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
















          • 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

















           

          draft saved


          draft discarded















































           


          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

          Syphilis

          Darth Vader #20