title: Angular (TypeScript) - How to change the color of text on click
body: <p>How can I change the color of text using Angular (TypeScript). I have a button that when clicked it changes the background color of the Header and Main section. But I want that SAME button to also change the color of the text. When I click I want the background, for example, in red and the text in white.</p>
  <p>I will add some more information to this question.</p>
  <p><strong>I did something in &quot;data.service.ts&quot; for the same button (that is in main section) to also change the background color in Main section:</strong></p>
  <pre><code>
  import { BehaviorSubject } from 'rxjs';
  
  export class DataService {
  
  
    private mensagemFonte = new BehaviorSubject &lt;string&gt; ('default value')
    actualMensagem = this.mensagemFonte.asObservable();
  
    constructor() { }
  
  
    alteraMensagem (mensagem: string) {
  
      this.mensagemFonte.next(mensagem)
  
    }
  
  }
  
  </code></pre>
  <p><strong>Then, in &quot;header.component.ts&quot;:</strong></p>
  <pre><code>import { DataService } from '../../data.service';
  
  export class HeaderComponent implements OnInit {
  
  
    DarkTheme: string;
  
  
  
  
    constructor(private data: DataService) { }
  
    ChangeColor(color: string) {
  
  
      this.data.alteraMensagem(color);
  
  
  
    }
  
  
    ngOnInit(): void {
  
      this.data.actualMensagem.subscribe(mensagem =&gt; this.DarkTheme = mensagem)
  
  
    }
  
  }
  
  </code></pre>
  <p><strong>And in the &quot;header.component.html&quot; (in here, I think that the importante part of code to this question is where I have &quot;[style.background]=DarkTheme&quot; and where you have &quot;ChangeColor&quot; , so I have:</strong></p>
  <pre><code>&lt;header&gt;
    &lt;nav class=&quot;navbar navbar-expand-lg navbar-light navbar-custom sticky-top&quot; style=&quot;padding: 0;&quot;
      [style.background]=DarkTheme&gt;
      &lt;div class=&quot;container&quot; style=&quot;padding: 50;&quot;&gt;
        &lt;a class=&quot;navbar-brand text-center&quot; href=&quot;#top&quot; id=&quot;nav-icon&quot;&gt;
          &lt;img class=&quot;img-fluid&quot; src=&quot;../../../assets/img/logo.svg&quot; width=&quot;100&quot; height=&quot;100&quot; /&gt;
        &lt;/a&gt;
        &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarNav&quot;
          aria-controls=&quot;navbarNav&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
          &lt;ul class=&quot;navbar-nav col-8&quot;&gt;
            &lt;li class=&quot;nav-item-1&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;#main&quot;&gt;AS MARAVILHAS&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; href=&quot;#footer&quot;&gt;CONTACTOS&lt;/a&gt;
            &lt;/li&gt;
  
          &lt;/ul&gt;
          &lt;ul class=&quot;navbar-nav col-4 sim&quot;&gt;
            &lt;li class=&quot;nav-item&quot;&gt;
              &lt;a class=&quot;nav-link&quot; style=&quot;cursor: pointer;&quot; (click)=&quot;ChangeColor ('red')&quot;&gt;MODO ESCURO&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
  &lt;/header&gt;
  
  
  </code></pre>