NG8002: Can't bind to 'ngStyle' since it isn't a known property of 'button'

I stumbled upon this error. [ERROR] NG8002: Can't bind to 'ngStyle' since it isn't a known property of 'button'.

The code in my button.component.html is <button [ngStyle] ="{ 'background-color': color }" class="btn">{{ text }}</button> The problem comes from ngStyle, if I use style it works perfectly fine. I read in the documentation and here how to fix this error so I can style with [ngStyle], but every solution was to import CommonModules in app.modules.ts. Since I'm using Angular: 17.1.2 I don't have such file.

button.component.ts

import { Component, Input} from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
selector: 'app-button',
standalone: true,
imports: [],
templateUrl: './button.component.html',
styleUrl: './button.component.css'
})
export class ButtonComponent {
@Input() text!: string;
@Input() color!: string;
}


app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from "./components/header/header.component";



@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.css',
imports: [RouterOutlet, HeaderComponent]
})
export class AppComponent {

}




Styling with ngStyle and to work

Continue reading...