Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -124,10 +124,10 @@ Because Dock Manager is a Web Component, it requires two one-time setup steps:
**1. Register custom elements — `main.ts`:**

```typescript
import { defineCustomElements } from 'igniteui-dockmanager/loader';
import { defineComponents, IgcDockManagerComponent } from 'igniteui-dockmanager';

// Must be called before bootstrapApplication
defineCustomElements();
defineComponents(IgcDockManagerComponent);
```

**2. Add `CUSTOM_ELEMENTS_SCHEMA` to every standalone component that uses `<igc-dockmanager>`:**
Expand Down Expand Up @@ -400,7 +400,7 @@ export class DockManagerComponent {
### Key Rules for Dock Manager

1. **Separate package** — `igniteui-dockmanager` is installed independently of `igniteui-angular`
2. **Call `defineCustomElements()` in `main.ts`** before `bootstrapApplication` — without this the `<igc-dockmanager>` element renders as an unknown element
2. **Call `defineComponents(IgcDockManagerComponent)` in `main.ts`** before `bootstrapApplication` — without this the `<igc-dockmanager>` element renders as an unknown element
3. **Add `CUSTOM_ELEMENTS_SCHEMA`** to every standalone component or NgModule that uses `<igc-dockmanager>`
4. **Slot names = `contentId` values** — the `slot="..."` attribute on child elements must exactly match the `contentId` string in the layout
5. **Premium component** — requires a licensed Ignite UI subscription; verify availability before recommending to users
Expand Down
6 changes: 3 additions & 3 deletions live-editing/configs/DockManagerConfigGenerator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ export class DockManagerConfigGenerator implements IConfigGenerator {
public generateConfigs(): Config[] {
const configs = new Array<Config>();

const dockManagerImport = "import { defineCustomElements } from 'igniteui-dockmanager/loader';";
const defineCustomElements = "defineCustomElements();";
const dockManagerImport = "import { defineComponents, IgcDockManagerComponent } from 'igniteui-dockmanager';";
const defineDockManagerComponents = 'defineComponents(IgcDockManagerComponent);';

configs.push(new Config({
component: 'DockManagerComponent',
additionalDependencies: ["igniteui-dockmanager"],
appConfig: { ...BaseAppConfig,
additionalAdjustments: [dockManagerImport, defineCustomElements]
additionalAdjustments: [dockManagerImport, defineDockManagerComponents]
},
shortenComponentPathBy: "/layouts/dock-manager/"
}));
Expand Down
11 changes: 5 additions & 6 deletions live-editing/configs/app-dv-configs/DVGridConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,14 @@ export class DVGridConfigGenerator implements IConfigGenerator {
GridFinJSComponent: '../../../projects/app-lob/src/app/grid-finjs/grid-finjs.component',
SignalRService: '../../../projects/app-lob/src/app/services/signal-r.service',
FloatingPanesService: '../../../projects/app-lob/src/app/services/floating-panes.service',
DockSlotComponent: '../../../projects/app-lob/src/app/grid-finjs-dock-manager/dock-slot.component',
GridHostDirective: '../../../projects/app-lob/src/app/grid-finjs-dock-manager/dock-slot.component',
DockSlotComponent: '../../../projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/dock-slot/dock-slot.component',
FinancialDataService: '../../../projects/app-lob/src/app/services/financial.service'
};
public generateConfigs(): Config[] {
const configs = new Array<Config>();

const dockManagerImport = 'import { defineCustomElements } from \'igniteui-dockmanager/loader\';';
const defineCustomElements = 'defineCustomElements();';
const dockManagerImport = 'import { defineComponents, IgcDockManagerComponent } from \'igniteui-dockmanager\';';
const defineDockManagerComponents = 'defineComponents(IgcDockManagerComponent);';

configs.push(new Config({
component: 'GridComponent',
Expand Down Expand Up @@ -88,11 +87,11 @@ export class DVGridConfigGenerator implements IConfigGenerator {
'/projects/app-lob/src/app/services/signal-r.service.ts',

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new components related to the imports shuld be included here -

Image

'/projects/app-lob/src/app/grid-finjs-dock-manager/app-data-store.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/watchlist/watchlist.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/chart-panel/chart-panel.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/order-ticket/order-ticket.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/positions-grid/positions-grid.component.scss', '/projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.ts', '/projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.html', '/projects/app-lob/src/app/grid-finjs-dock-manager/news-panel/news-panel.component.scss'

  • result -

Image.
Still additional changes should be done in the live-editing repository - SamplesAssetsGenerator - private _normalizePath function

'/projects/app-lob/src/app/data/financialData.ts',
'/projects/app-lob/src/app/services/floating-panes.service.ts',
'/projects/app-lob/src/app/grid-finjs-dock-manager/dock-slot.component.ts',
'/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/dock-slot/dock-slot.component.ts',
'/projects/app-lob/src/_app-layout.scss', '/projects/app-lob/src/_variables.scss'
],
appConfig: { ...BaseAppConfig,
additionalAdjustments: [dockManagerImport, defineCustomElements]
additionalAdjustments: [dockManagerImport, defineDockManagerComponents]
}
}));

Expand Down
29 changes: 18 additions & 11 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
"igniteui-angular-core": "^22.0.0",
"igniteui-angular-extras": "22.1.0-beta.1",
"igniteui-angular-i18n": "22.1.0-beta.1",
"igniteui-dockmanager": "^1.17.0",
"igniteui-dockmanager": "^2.1.3",
"igniteui-grid-lite": "0.9.0",
"igniteui-i18n-resources": "^1.0.4",
"igniteui-live-editing": "^3.5.1",
Expand Down Expand Up @@ -147,14 +147,14 @@
"event-stream": "^4.0.1",
"fs-extra": "^8.1.0",
"gulp": "^5.0.1",
"slash": "^3.0.0",
"istanbul-lib-instrument": "^6.0.3",
"jasmine-core": "~5.1.1",
"karma": "^6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"postcss": "^8.5.3",
"slash": "^3.0.0",
"ts-node": "^10.9.1",
"typescript": "6.0.3",
"typescript-eslint": "^8.61.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@use '../../../variables' as *;
@import 'igniteui-dockmanager/dist/collection/styles/igc.themes.css';
@import 'igniteui-dockmanager/themes/igc.themes.css';

:host {
width: 100%;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable max-len */
import { AfterViewInit, ChangeDetectorRef, ViewContainerRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, OnInit, Pipe, PipeTransform, QueryList, ViewChild, ViewChildren, TemplateRef, inject } from '@angular/core';
import { IgxChartIntegrationDirective, IgxConditionalFormattingDirective, IgxContextMenuDirective, OPTIONS_TYPE, CHART_TYPE, IDeterminedChartTypesArgs } from 'igniteui-angular-extras';
import { IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager';
import { IgcDockManagerComponent, IgcDockManagerLayout, IgcDockManagerPaneType, IgcSplitPane, IgcSplitPaneOrientation } from 'igniteui-dockmanager';
import { FinancialData } from '../../data/financialData';
import { FloatingPanesService } from '../../services/floating-panes.service';
import { DockSlotComponent } from './dock-slot/dock-slot.component';
Expand Down Expand Up @@ -68,7 +68,7 @@ export class DataAnalysisDockManagerComponent implements OnInit, AfterViewInit {
public grid: IgxGridComponent;

@ViewChild('dock', { read: ElementRef })
public dockManager: ElementRef<HTMLIgcDockmanagerElement>;
public dockManager: ElementRef<IgcDockManagerComponent>;

@ViewChild(IgxChartIntegrationDirective, { read: IgxChartIntegrationDirective, static: true })
public chartIntegration: IgxChartIntegrationDirective;
Expand Down
32 changes: 32 additions & 0 deletions projects/app-lob/src/app/grid-finjs-dock-manager/app-data-store.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Injectable } from '@angular/core';

export interface NavItem {
label: string;
icon: string;
}

export interface MarketIdx {
name: string;
value: string;
change: string;
positive: boolean;
}

@Injectable({ providedIn: 'root' })
export class AppDataStore {
public readonly navItems: NavItem[] = [
{ label: 'Watchlist', icon: 'format_list_bulleted' },
{ label: 'Dashboard', icon: 'dashboard' },
{ label: 'Charts', icon: 'bar_chart' },
{ label: 'Goal Simulator', icon: 'track_changes' },
{ label: 'Dividends', icon: 'payments' },
{ label: 'Alerts', icon: 'notifications' }
];

public readonly indices: MarketIdx[] = [
{ name: 'S&P 500', value: '5,634.61', change: '+0.42%', positive: true },
{ name: 'NASDAQ', value: '18,234.55', change: '+0.65%', positive: true },
{ name: 'DOW', value: '39,872.10', change: '-0.12%', positive: false },
{ name: 'VIX', value: '14.22', change: '-2.10%', positive: false }
];
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<div class="chart-panel">
<div class="chart-header">
<div class="price-block">
<span class="current-price">{{ currentPrice() | number:'1.2-2' }}</span>
<span
class="price-change"
[class.pos]="priceChange().positive"
[class.neg]="!priceChange().positive"
>
{{ priceChange().positive ? '+' : '-' }}{{ priceChange().value }}
({{ priceChange().positive ? '+' : '-' }}{{ priceChange().pct }}%)
</span>
</div>
<div class="ohlc-stats">
<span class="stat-item">O <b>{{ todayStats().open }}</b></span>
<span class="stat-item">H <b>{{ todayStats().high }}</b></span>
<span class="stat-item">L <b>{{ todayStats().low }}</b></span>
<span class="stat-item">Vol <b>{{ todayStats().vol }}</b></span>
</div>
<div class="range-buttons" role="group" aria-label="Chart time range">
@for (r of ranges; track r) {
<button
igxButton="flat"
class="range-btn"
[class.active-range]="selectedRange() === r"
(click)="selectedRange.set(r)"
>{{ r }}</button>
}
</div>
</div>

<div class="chart-area">
<igx-financial-chart
[dataSource]="chartData()"
chartType="Candle"
xAxisMode="Time"
zoomSliderType="None"
[isToolbarVisible]="false"
brushes="#34d399"
outlines="#34d399"
negativeBrushes="#ef4444"
negativeOutlines="#ef4444"
xAxisLabelTextColor="#5e7798"
yAxisLabelTextColor="#5e7798"
xAxisMajorStroke="#1e2d44"
yAxisMajorStroke="#1e2d44"
height="100%"
width="100%"
></igx-financial-chart>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
:host {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--sd-bg);
}

.chart-panel {
display: flex;
flex-direction: column;
height: 100%;
}

.chart-header {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 16px;
border-bottom: 1px solid var(--sd-border);
flex-shrink: 0;
flex-wrap: wrap;
}

.price-block {
display: flex;
align-items: baseline;
gap: 10px;
}

.current-price {
font-size: 26px;
font-weight: 700;
color: var(--sd-text);
font-variant-numeric: tabular-nums;
font-family: 'DM Mono', monospace;
letter-spacing: -0.5px;
}

.price-change {
font-size: 13px;
font-weight: 500;
}

.ohlc-stats {
display: flex;
gap: 14px;
flex: 1;
}

.stat-item {
font-size: 12px;
color: var(--sd-muted);
white-space: nowrap;
}

.stat-item b {
color: var(--sd-text);
font-weight: 500;
}

.range-buttons {
display: flex;
gap: 2px;
}

.range-btn {
font-size: 11px;
padding: 3px 9px;
color: var(--sd-muted);
min-width: unset;
border-radius: 4px;
transition: background 0.12s, color 0.12s;
}

.range-btn.active-range {
color: var(--sd-cyan);
background: var(--sd-cyan-dim);
}

.chart-area {
flex: 1;
min-height: 0;
padding: 4px 0 0;
}

.pos { color: var(--sd-green); }
.neg { color: var(--sd-red); }
Loading