@Günter's answer is correct. I just wanted to propse yet another method.

You could also add the host-binding inside the @Component()-decorator. You can put the event and desired function call in the host-metadata-property like so:

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], host: { '(window:resize)': 'onResize($event)' } }) export class AppComponent{ onResize(event){ event.target.innerWidth; // window width } } 

@Günter's answer is correct. I just wanted to propose yet another method.

You could also add the host-binding inside the @Component()-decorator. You can put the event and desired function call in the host-metadata-property like so:

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], host: { '(window:resize)': 'onResize($event)' } }) export class AppComponent{ onResize(event){ event.target.innerWidth; // window width } }