How to change background color using Angular

Question

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

What is your question, exactly? Do you want to change the color dynamically? What is the condition it should be based on? — John Montgomery
– John Montgomery, Commented Mar 20, 2019 at 22:19
Also, can you add your component code to the question? That's probably relevant to whatever you're trying to do. — John Montgomery
– John Montgomery, Commented Mar 20, 2019 at 22:22
@JohnMontgomery I just want a static light blue background color. I added the ts — Tony1957
– Tony1957, Commented Mar 20, 2019 at 22:41

John Montgomery · Accepted Answer · 2019-03-20 22:47:57Z

2

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.

answered Mar 20, 2019 at 22:47

John Montgomery

7,10610 gold badges58 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change background color using Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related