CODEWITHSUNDEEP
angular
Tony1957
Tony1957

Reputation: 191

How to change background color using Angular

I am attempting to change the background color of my home component page.

Here is the component.ts

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<Cagr[]>
  stock: Cagr[];
  gotStocks: boolean;
  gotStocks$: Observable<boolean>;

  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 => {
           this.stock = data;
           this.gotStocks = true;
           }

       )}
}

This is the HTML file:

<div class="bg">    
    <div style="text-align:center">
            <h1>goop.dev</h1>
    </div>    
</div>

Here is the css file:

.bg { background-color:#a9c5f2; }

This a stackblitz

I have another component file that has the same code but does display the blue background, auth.component.ts

<div class="bg">    
<div style="text-align:center">
  <h1>goop.dev</h1>
</div>    
<amplify-authenticator [signUpConfig]="signUpConfig" ></amplify-authenticator>

and auth.component.css

.bg { background-color:#a9c5f2; }

Upvotes: 1

Views: 985

Answers (1)

John Montgomery
John Montgomery

Reputation: 7106

The problem is that you aren't importing your CSS into the component. Just change your component decorator to this:

@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
})

And it should work.

Also, I just took a look at your stackblitz, and you called the file home.component.cs. If that typo is in your actual project, make sure to correct that as well.

Upvotes: 2

Related Questions