Clever Geek Handbook

Ag-grid: How to set custom background color on column header?

I am using ag-grid with Angular 4. I want to be able to change the background color of individual column headers at runtime.

It seems like I should be using the headerComponentFramework property in coldefs, but I have no idea how to use that. Anyone have an idea?

Regards, Alex

+3


source to share


1 answer


Here is a plunker that showcases a header component like what you want. I took this from the examples in the docs for ag-grid . Take a look mainly at header.component.html

where the magic is.

I think the only confusing part is when you create the HeaderComponent:



export class HeaderComponent implements IHeaderAngularComp {
    public color: string = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    public params: MyParams;
    private elementRef: ElementRef;

    ...

    //You will need to get the params from agInit so that you can access
    //the value for each column

    agInit(params: MyParams): void {
        this.params = params;
    }
}

Please check their docs for a more detailed explanation, they are getting better every day

0


source






More articles:


All Articles