Chrome extension with Angular: CSP inline-policy error. Refused to execute inline event handler

I would like to associate a logout function to the navbar of a chrome extension. But when I click on the respective tab, it doesn't navigate to the signin component and gives me the following error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

At https://developer.chrome.com/docs/apps/contentSecurityPolicy/ it says that we can't use inline scripting in your Chrome App pages and the restriction bans both blocks and event handlers ().

I've seen solutions on stackoverflow such as this Refused to execute inline event handler because it violates CSP. (SANDBOX) that say that we could add an id to the button and then add an eventlistener on the javascript but this way I could not add this line of code: this.router.navigate(['/signin']) as is.

I think I could have a typescript file transpiled to javascript but if I place document.getElementById(<id_of_button>) on the ts file it retrieves me null, I think the typescript is loaded before the template.

How can I solve this chrome extension error with Angular and Typescript?

I've the code as below:

App.component.html

<mat-tab>
<ng-template mat-tab-label>
<button mat-button [matMenuTriggerFor]="menuAccount"><mat-icon fontSet="fas" style="font-size: 18px;" fontIcon="fa-user-circle"></mat-icon></button>
</ng-template>
<mat-menu #menuAccount="matMenu">
<button mat-menu-item><mat-icon fontSet="fa" style="font-size: 16px;" fontIcon="fa-cogs"></mat-icon><span>{{dpd_items[0].viewValue}}</span></button>
<button (click)="logout()" mat-menu-item><mat-icon fontSet="fas" style="font-size: 16px;" fontIcon="fa-sign-out-alt"></mat-icon><span>{{dpd_items[1].viewValue}}</span></button>
</mat-menu>
</mat-tab>


App.component.ts

logout() {
this.router.navigate(['/signin']);
}

Continue reading...