Cannot use ngIf in cell renderer

Question

I'm trying to have buttons that are displayed or hidden, depending on various conditions in a custom cell renderer.

Here's the template of my renderer:

<div class="btn-toolbar" style="justify-content: flex-start; display: flex;">
    <button (click)="editStage()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-edit"></span></button>
    <button (click)="gotoSteps()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-code-branch"></span></button>
    <button *ngIf="stage.order > 0 && nbrStages > 1" (click)="moveUp()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-arrow-up"></span></button>
    <button *ngIf="orderPlusOne < nbrStages && nbrStages > 1" (click)="moveDown()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fas fa-arrow-down"></span></button>
   <button (click)="deleteStage()" type="button" class="btn-xs btn btn-primary btn-default btn-space"><span class="fa fa-trash-alt"></span></button>
</div>

And here's the component code

@Component({
    selector: 'app-workflow-stage-buttons',
    templateUrl: './workflow-stage-buttons.component.html',
    styleUrls: ['./workflow-stage-buttons.component.css']
})
/** workflow-stage-buttons component*/
export class WorkflowStageButtonsComponent implements ICellRendererAngularComp {
    /** workflow-stage-buttons ctor */
    constructor() {

    }

    params: any;
    stage: WorkflowStage;
    nbrStages: number;
    orderPlusOne: number;
    

    refresh(params: any): boolean {
        return false;
    }

    agInit(params: import("ag-grid-community").ICellRendererParams): void {
        this.params = params;
        this.stage = <WorkflowStage>this.params.data;
        this.nbrStages = this.params.api.getRenderedNodes().length;
        this.orderPlusOne = this.stage.order + 1;
    }

    afterGuiAttached?(params?: import("ag-grid-community").IAfterGuiAttachedParams): void {

    }
}

I get the following error when the cell is being rendered though:

Can't bind to 'ngIf' since it isn't a known property of 'button'.

Outside of the cell renderer logic, I can do an ngIf on a button anywhere else in my application. It seems that something isn't loaded properly when in the context of the cell renderer.

I've tried adding WorkflowStageButtonsComponent in my module's declarations and adding CommonModule in my module's imports and that didn't do the trick.

Any ideas ?

EDIT: I'm using [email protected]

Answer 1

import CommonModule from the module that is providing your component.

@NgModule({
    imports: [CommonModule], // <- importing CommonModule
    declarations: [WorkflowStageButtonsComponent]
    ...
}) 
export class MyComponentModule {} // This is the module where you define your component