# spreadsheet-editor-conditional-formatting

> Spreadsheet sample demonstrating rules that apply conditional formatting to cell ranges.

**Framework:** angular  **Component:** Spreadsheet  **Variant:** conditional-formatting

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/spreadsheet-editor-conditional-formatting.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-spreadsheet
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/spreadsheet-editor-conditional-formatting/conditional-formatting.component.ts

```typescript
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { conditionalFormatData } from '../data';
import { SpreadsheetComponent, SpreadsheetModule } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Conditional Formatting Spreadsheet Component
 */
@Component({
    selector: 'control-content',
    templateUrl: 'conditional-formatting.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [ SpreadsheetModule]
})

export class ConditionalFormattingController {
    @ViewChild('spreadsheet')
    spreadsheetObj!: SpreadsheetComponent;
    data: Object[] = conditionalFormatData();
    public openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
    public saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
    created() {
        this.spreadsheetObj.merge('A1:H1');
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:H2');
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: "middle", fontSize: '13pt' }, 'A1:H1');
        this.spreadsheetObj.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });
        this.spreadsheetObj.conditionalFormat({ type: 'GreenDataBar', range: 'E3:E18' });
        this.spreadsheetObj.conditionalFormat({ type: 'ThreeStars', range: 'H3:H18' });
        this.spreadsheetObj.conditionalFormat({ type: 'Top10Items', value:'1', format:{ style:{ color: '#ffffff', backgroundColor: '#009999', fontWeight: 'bold'}}, range: 'F3:F18' });
        this.spreadsheetObj.conditionalFormat({ type: 'Bottom10Items', value:'1', format:{ style:{ color: '#ffffff', backgroundColor: '#c68d53', fontWeight: 'bold'}}, range: 'F3:F18' });
        // Apply format to the specified range in the active sheet.
        this.spreadsheetObj.numberFormat('$#,##0.00', 'D3:D18');
        this.spreadsheetObj.numberFormat('$#,##0.00', 'E3:E18');
        this.spreadsheetObj.numberFormat('$#,##0.00', 'F3:F18');
        this.spreadsheetObj.numberFormat('m/d/yyyy', 'G3:G18');
    }
}

```

### src/components/spreadsheet-editor-conditional-formatting/conditional-formatting.html

```html
<div class="control-section">
    <ejs-spreadsheet #spreadsheet [openUrl]="openUrl" [saveUrl]="saveUrl" (created)="created()">
        <e-sheets>
            <e-sheet name="Inventory List">
                <e-rows>
                    <e-row [height]=30>
                        <e-cells>
                            <e-cell [index]="1" value="Inventory List"></e-cell>
                        </e-cells>
                    </e-row>
                </e-rows>
                <e-ranges>
                    <e-range [dataSource]="data" startCell="A2"></e-range>
                </e-ranges>
                <e-conditionalformats>
                    <e-conditionalformat type="GYRColorScale" range="C3:C18"></e-conditionalformat>
                    <e-conditionalformat type="LessThan" cFColor="RedFT" value="8-8-2019" range="G3:G18"></e-conditionalformat>
                </e-conditionalformats>
                <e-columns>
                    <e-column [width]=100></e-column>
                    <e-column [width]=158></e-column>
                    <e-column [width]=72></e-column>
                    <e-column [width]=110></e-column>
                    <e-column [width]=110></e-column>
                    <e-column [width]=77></e-column>
                    <e-column [width]=97></e-column>
                    <e-column [width]=73></e-column>
                </e-columns>
            </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
</div>
```