Angular 2+ Animation- Changing color on body element

Question

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.

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.

Here is my code on TypeScript: (Code doesn't produce an error. It just doesn't do what I intended to do.)

@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 => on', [animate('2s')]),
        transition('on => 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';
    }
}

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.

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!

Isn't that because index.html isn't your HTML template ? For all I know, you don't have any controller on index.html. — , May 24 '17 at 06:54
Yes, but I am wondering how I can reach into the body element. This is weird because I am trying to reach the parent from the child. — Chaewon Min, May 25 '17 at 01:57
I think that if you want to animate the body, you should do it by hand instead of using angular. — , May 25 '17 at 07:36
You mean like by using JQuery or something? I tried that, but I can't get the toggle to work for the body element. I feel like there is a way to do it in Angular though. The animations are much easier to control. — Chaewon Min, May 25 '17 at 15:38
The problem is that index.html isn't binded to any controller, I really wonder how you could do that with angular. If you find something, let me know! — , May 25 '17 at 19:02

score 2 · Answer 1 · answered Aug 21 '17 at 14:38

this could be the problem:

transition('off => on', [animate('2s')]),
transition('on => off', [animate('2s')])

try without brackets for animate parameter.

transition('off => on', animate('500ms')),
transition('on => off ', animate('500ms'))

Works for me.

score 0 · Answer 2 · answered Jun 09 '17 at 08:00

If you want to change the whole body, then write the animations: in the component which defines your body. it wont change your jumbotron or footer so what you can do is make div with properties covering the whole screen, and then apply your trigger there [@changeBodyColor].

Angular 2+ Animation- Changing color on body element

2 Answers2