How can I change the css style in another component by clicking the button?

I have developed a component test1 which contains a button and a <p>Hello World</p>. When I click on the button the background color of the paragraph changes. But now I want to change the background color in app.component when I click on the button. I tried to solve the problem with @Input, but unfortunately it does not work yet. Can you please help me?

My code:

// test1.component

// HTML
<button type="button" (click)="testHandler()">Change Color</button>
<p [class.toggled]="classToggled">Hello World</p>

// CSS
.toggled {
background-color: blue !important;
}

// TS
public classToggled = false;
testHandler() {
this.classToggled = true;
}
// app.component

// HTML
<div class="wrapper" [class.test1]="classToggled">
  <router-outlet></router-outlet>
</div>

// CSS
.test1 {
  background-color: red !important;
}

// TS
 @Input()  public classToggled = false;

Source: Angular Questions