title: Angular 2+ Animation- Changing color on body element
body: <p>I am a beginner programmer, and I recently started to learn Angular 4. I am trying to make a personal site and want to add some animations.</p>
  
  <p>On the top of the page, I have a jumbotron with a logo. I want it so that so that when I click on this logo, the background color of the body changes, but it seems that the function trigger the  element. </p>
  
  <p>Here is my code on TypeScript: (Code doesn't produce an error. It just doesn't do what I intended to do.)</p>
  
  <pre><code>@Component({
      selector: 'main-jumbotron',
      templateUrl: './jumbotron.component.html',
      styleUrls: ['./jumbotron.component.css'],
      animations: [
        trigger("changeBodyColor", [
          state('off', style({
              backgroundColor: '#CCFFCC'
          })),
          state('on', style({
              backgroundColor: '#3A3A38'
          })),
          transition('off =&gt; on', [animate('2s')]),
          transition('on =&gt; off', [animate('2s')])
        ])
      ]
  })
  export class JumbotronComponent implements OnInit {
       // other private instance data, constructor here, ngOnInit etc.
  
      colorState: string = 'off';
          toggleColor() {
              console.log('triggered ' + this.colorState);
              this.colorState = (this.colorState === 'off') ? 'on' : 'off';
      }
  }
  </code></pre>
  
  <p>When I put [@changeBodyColor]="colorState" in the div element of the jumbotron, animation works, but just changing the jumbotron background color, obviously. When I put this on the body element from index.html, the function is triggered (logged on console), but the color does not change.</p>
  
  <p>I feel like this is a problem with the DOM hierarchy. If anyone has some idea of what the issue might be, please let me know!</p>