title: How to change background color using Angular
body: <p>I am attempting to change the background color of my home component page.  </p>
  
  <p>Here is the component.ts</p>
  
  <pre><code>import { Component } from '@angular/core'
  import { ApiService } from '../_services/api.service'
  import { Observable} from 'rxjs'
  
  //import { Istock } from '../_models/istock'
  import { Cagr } from '../_models/cagr'
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.component.html'
  })
  export class HomeComponent {
  
    public buySellData$: Observable&lt;Cagr[]&gt;
    stock: Cagr[];
    gotStocks: boolean;
    gotStocks$: Observable&lt;boolean&gt;;
  
    constructor(private api: ApiService){
    }
  
    exit() {
      window.location.reload();
    }
    getStock() {
     this.buySellData$ = this.api.getBuySellData();
      this.buySellData$.subscribe(
           // Use the `data` variable to produce output for the user
           data =&gt; {
             this.stock = data;
             this.gotStocks = true;
             }
  
         )}
  }  
  </code></pre>
  
  <p>This is the HTML file:</p>
  
  <pre><code>&lt;div class="bg"&gt;    
      &lt;div style="text-align:center"&gt;
              &lt;h1&gt;goop.dev&lt;/h1&gt;
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css file:</p>
  
  <pre><code>.bg { background-color:#a9c5f2; }
  </code></pre>
  
  <p>This a <a href="https://stackblitz.com/edit/angular-sevazn-ztewf6" rel="nofollow noreferrer">stackblitz</a></p>
  
  <p>I have another component file that has the same code but does display the blue background, auth.component.ts</p>
  
  <pre><code>&lt;div class="bg"&gt;    
  &lt;div style="text-align:center"&gt;
    &lt;h1&gt;goop.dev&lt;/h1&gt;
  &lt;/div&gt;    
  &lt;amplify-authenticator [signUpConfig]="signUpConfig" &gt;&lt;/amplify-authenticator&gt;
  </code></pre>
  
  <p></p>
  
  <p>and auth.component.css</p>
  
  <pre><code>.bg { background-color:#a9c5f2; }
  </code></pre>