<div class="widget-container">
<dx-resizable
class="resizable-container"
[minWidth]="500"
[minHeight]="150"
[maxHeight]="370"
handles="right"
area=".widget-container"
>
<dx-toolbar #toolbar [multiline]="true">
<dxi-item location="before" widget="dxButton">
<div *dxTemplate>
<dx-button icon="undo" (onClick)="onButtonClick('Undo')"></dx-button>
</div>
</dxi-item>
<dxi-item location="before" widget="dxButton">
<div *dxTemplate>
<dx-button icon="redo" (onClick)="onButtonClick('Redo')"></dx-button>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
menuItemTemplate="menuSeparatorTemplate"
>
<div *dxTemplate>
<div class="toolbar-separator"></div>
</div>
</dxi-item>
<dxi-item location="before" locateInMenu="auto" widget="dxDropDownButton">
<div *dxTemplate>
<dx-drop-down-button
width="100%"
displayExpr="text"
keyExpr="size"
itemTemplate="fontSizeTemplate"
[items]="fontSizes"
[selectedItemKey]="fontSizes[2].size"
[useSelectMode]="true"
(onSelectionChanged)="onSelectionChanged('Font Size')"
>
<div *dxTemplate="let data of 'fontSizeTemplate'">
<div [style.fontSize]="data.size + 'px'">{{ data.text }}</div>
</div>
</dx-drop-down-button>
</div>
</dxi-item>
<dxi-item location="before" locateInMenu="auto" widget="dxDropDownButton">
<div *dxTemplate>
<dx-drop-down-button
width="100%"
icon="indent"
displayExpr="text"
keyExpr="lineHeight"
[items]="lineHeights"
[useSelectMode]="true"
[selectedItemKey]="lineHeight"
(onSelectionChanged)="onSelectionChanged('Line Height')"
></dx-drop-down-button>
</div>
</dxi-item>
<dxi-item location="before" locateInMenu="auto" widget="dxSelectBox">
<div *dxTemplate>
<dx-select-box
placeholder="Font"
displayExpr="text"
[inputAttr]="{ 'aria-label': 'Font' }"
[items]="fontFamilies"
(onItemClick)="onFontFamilyClick()"
></dx-select-box>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
menuItemTemplate="menuSeparatorTemplate"
>
<div *dxTemplate>
<div class="toolbar-separator"></div>
</div>
</dxi-item>
<dxi-item location="before" widget="dxButtonGroup">
<div *dxTemplate>
<dx-button-group
displayExpr="text"
keyExpr="icon"
stylingMode="outlined"
selectionMode="multiple"
[items]="fontStyles"
(onItemClick)="onButtonClick($event.itemData.hint)"
></dx-button-group>
</div>
</dxi-item>
<dxi-item location="before">
<div *dxTemplate>
<div class="toolbar-separator"></div>
</div>
</dxi-item>
<dxi-item
widget="dxButtonGroup"
location="before"
locateInMenu="auto"
menuItemTemplate="menuTextAlignTemplate"
>
<div *dxTemplate>
<dx-button-group
keyExpr="alignment"
stylingMode="outlined"
[items]="textAlignItems"
[(selectedItemKeys)]="selectedTextAlign"
(onItemClick)="onTextAlignChanged($event)"
></dx-button-group>
</div>
</dxi-item>
<dxi-item location="before" widget="dxButtonGroup">
<div *dxTemplate>
<dx-button-group
keyExpr="alignment"
stylingMode="outlined"
[items]="listTypes"
(onItemClick)="onButtonClick($event.itemData.hint)"
></dx-button-group>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
menuItemTemplate="menuSeparatorTemplate"
>
<div *dxTemplate>
<div class="toolbar-separator"></div>
</div>
</dxi-item>
<dxi-item location="before" locateInMenu="auto" widget="dxSelectBox">
<div *dxTemplate>
<dx-select-box
displayExpr="text"
valueExpr="text"
[inputAttr]="{ 'aria-label': 'Text Style' }"
[value]="heading"
[items]="headings"
(onItemClick)="onHeadingClick()"
></dx-select-box>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
menuItemTemplate="menuSeparatorTemplate"
>
<div *dxTemplate>
<div class="toolbar-separator"></div>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
widget="dxButton"
showText="inMenu"
>
<div *dxTemplate>
<dx-button
icon="link"
text="Link"
(onClick)="onButtonClick('Link')"
></dx-button>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
widget="dxButton"
showText="inMenu"
>
<div *dxTemplate>
<dx-button
icon="image"
text="Add image"
(onClick)="onButtonClick('Add Image')"
></dx-button>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
menuItemTemplate="menuSeparatorTemplate"
>
<div *dxTemplate>
<div class="toolbar-separator"></div>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
widget="dxButton"
showText="inMenu"
>
<div *dxTemplate>
<dx-button
icon="clearformat"
text="Clear formating"
(onClick)="onButtonClick('Clear Formating')"
></dx-button>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
widget="dxButton"
showText="inMenu"
>
<div *dxTemplate>
<dx-button
icon="codeblock"
text="Code block"
(onClick)="onButtonClick('Code Block')"
></dx-button>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
widget="dxButton"
showText="inMenu"
>
<div *dxTemplate>
<dx-button
icon="blockquote"
text="Blockquote"
(onClick)="onButtonClick('Blockquote')"
></dx-button>
</div>
</dxi-item>
<dxi-item
location="before"
locateInMenu="auto"
menuItemTemplate="menuSeparatorTemplate"
>
<div *dxTemplate>
<div class="toolbar-separator"></div>
</div>
</dxi-item>
<dxi-item location="after" widget="dxButton" showText="inMenu">
<div *dxTemplate>
<dx-button
icon="attach"
text="Attach"
(onClick)="onButtonClick('Attach')"
></dx-button>
</div>
</dxi-item>
<dxi-item locateInMenu="always" widget="dxButton" showText="inMenu">
<div *dxTemplate>
<dx-button
icon="help"
text="About"
(onClick)="onButtonClick('About')"
></dx-button>
</div>
</dxi-item>
<div *dxTemplate="let data of 'menuSeparatorTemplate'">
<div class="toolbar-menu-separator"></div>
</div>
<div *dxTemplate="let data of 'menuTextAlignTemplate'">
<dx-button-group
keyExpr="alignment"
stylingMode="outlined"
[items]="textAlignItemsExtended"
[selectedItemKeys]="selectedTextAlign"
(onItemClick)="onTextAlignChanged($event)"
></dx-button-group>
</div>
</dx-toolbar>
</dx-resizable>
</div>
<div class="options-container">
<div class="caption">Options</div>
<dx-check-box
[(value)]="toolbar.multiline"
text="Multiline mode"
></dx-check-box>
</div>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
DxToolbarModule,
DxSelectBoxModule,
DxTemplateModule,
DxResizableModule,
DxDropDownButtonModule,
DxButtonModule,
DxButtonGroupModule,
DxCheckBoxModule,
} from 'devextreme-angular';
import notify from 'devextreme/ui/notify';
import {
FontFamily,
FontSize,
FontStyle,
Heading,
LineHeight,
ListType,
Service,
TextAlign,
TextAlignExtended,
} from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service],
})
export class AppComponent {
fontSizes: FontSize[] = this.service.getFontSizes();
lineHeights: LineHeight[] = this.service.getLineHeights();
lineHeight: number[] = [this.lineHeights[1].lineHeight];
fontFamilies: FontFamily[] = this.service.getFontFamilies();
headings: Heading[] = this.service.getHeadings();
heading: string = this.headings[0].text;
fontStyles: FontStyle[] = this.service.getFontStyles();
textAlignItems: TextAlign[] = this.service.getTextAlign();
textAlignItemsExtended: TextAlignExtended[] = this.service.getTextAlignExtended();
selectedTextAlign: string[] = [this.textAlignItems[0].alignment];
listTypes: ListType[] = this.service.getListType();
constructor(private service: Service) {}
onTextAlignChanged(e: { itemData: { hint: string } }): void {
this.onButtonClick(e.itemData.hint);
}
onButtonClick(name: string) {
notify(`The "${name}" button has been clicked`);
}
onSelectionChanged(name: string) {
notify(`The "${name}" value has been changed`);
}
onCheckBoxValueChanged() {
notify('The "Navigation Pane" checkbox value has been changed');
}
onDateBoxValueChanged() {
notify('The "DateBox" value has been changed');
}
onFontFamilyClick() {
notify('The "Font Family" value has been changed');
}
onHeadingClick() {
notify('The "Heading" value has been changed');
}
}
@NgModule({
imports: [
BrowserModule,
BrowserTransferStateModule,
DxToolbarModule,
DxSelectBoxModule,
DxTemplateModule,
DxResizableModule,
DxDropDownButtonModule,
DxButtonModule,
DxButtonGroupModule,
DxCheckBoxModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
:host {
display: block;
}
::ng-deep .dx-resizable-handle::after {
content: "";
position: absolute;
width: 9px;
height: 36px;
border: none;
border-radius: 50px;
background-color: #fff;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
}
::ng-deep .dx-resizable-handle-right::after {
top: 50%;
right: -5px;
transform: translateY(-50%);
}
::ng-deep .dx-toolbar.dx-toolbar-multiline .dx-toolbar-item {
margin-bottom: 5px;
}
::ng-deep .widget-container {
margin-right: 10px;
}
::ng-deep .resizable-container {
padding: 10px;
height: 300px;
border: 1px dotted #999;
border-radius: 4px;
box-sizing: border-box;
}
::ng-deep .options-container {
margin-top: 20px;
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
position: relative;
}
::ng-deep .caption {
font-size: 18px;
font-weight: 500;
margin-bottom: 10px;
}
::ng-deep .toolbar-separator {
height: 36px;
margin: 0 5px;
border-left: 1px solid #ddd;
}
::ng-deep .toolbar-menu-separator {
height: 1px;
border-bottom: 1px solid #ddd;
}
import { Injectable } from '@angular/core';
export class FontSize {
size: number;
text: string;
}
export class LineHeight {
lineHeight: number;
text: string;
}
export class FontFamily {
text: string;
}
export class Heading {
text: string;
}
export class FontStyle {
icon: string;
hint: string;
}
export class TextAlign {
icon: string;
alignment: string;
hint: string;
}
export class TextAlignExtended extends TextAlign {
text: string;
}
export class ListType {
icon: string;
alignment: string;
hint: string;
}
const fontSizes: FontSize[] = [
{ size: 10, text: '10px' },
{ size: 12, text: '12px' },
{ size: 14, text: '14px' },
{ size: 16, text: '16px' },
{ size: 18, text: '18px' },
];
const lineHeights: LineHeight[] = [
{ lineHeight: 1, text: '1' },
{ lineHeight: 1.35, text: '1.35' },
{ lineHeight: 1.5, text: '1.5' },
{ lineHeight: 2, text: '2' },
];
const fontFamilies: FontFamily[] = [
{ text: 'Arial' },
{ text: 'Courier New' },
{ text: 'Georgia' },
{ text: 'Impact' },
{ text: 'Lucida Console' },
{ text: 'Tahoma' },
{ text: 'Times New Roman' },
];
const headings: Heading[] = [
{ text: 'Normal text' },
{ text: 'Heading 1' },
{ text: 'Heading 2' },
{ text: 'Heading 3' },
{ text: 'Heading 4' },
{ text: 'Heading 5' },
];
const fontStyles: FontStyle[] = [
{
icon: 'bold',
hint: 'Bold',
},
{
icon: 'italic',
hint: 'Italic',
},
{
icon: 'underline',
hint: 'Underlined',
},
{
icon: 'strike',
hint: 'Strikethrough',
},
];
const textAlignsExtended: TextAlignExtended[] = [
{
icon: 'alignleft',
alignment: 'left',
hint: 'Align Left',
text: 'Align left',
},
{
icon: 'aligncenter',
alignment: 'center',
hint: 'Center',
text: 'Center',
},
{
icon: 'alignright',
alignment: 'right',
hint: 'Align Right',
text: 'Align right',
},
{
icon: 'alignjustify',
alignment: 'justify',
hint: 'Justify',
text: 'Justify',
},
];
const listTypes: ListType[] = [
{
icon: 'orderedlist',
alignment: 'orderedlist',
hint: 'Ordered',
},
{
icon: 'bulletlist',
alignment: 'bulletlist',
hint: 'Bullet',
},
];
@Injectable()
export class Service {
getFontSizes(): FontSize[] {
return fontSizes;
}
getLineHeights(): LineHeight[] {
return lineHeights;
}
getFontFamilies(): FontFamily[] {
return fontFamilies;
}
getHeadings(): Heading[] {
return headings;
}
getFontStyles(): FontStyle[] {
return fontStyles;
}
getTextAlign(): TextAlign[] {
return textAlignsExtended.map(
({ icon, alignment, hint }) => ({ icon, alignment, hint }),
);
}
getTextAlignExtended(): TextAlignExtended[] {
return textAlignsExtended;
}
getListType(): ListType[] {
return listTypes;
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.17',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17',
'@angular/forms': 'npm:@angular/forms@12.2.17',
'@angular/common': 'npm:@angular/common@12.2.17',
'@angular/compiler': 'npm:@angular/compiler@12.2.17',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.6/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@23.1.6/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.2',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.49',
'devextreme-angular': 'npm:devextreme-angular@23.1.6',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.17/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@23.1.6/*/package.json',
'npm:devextreme-angular@23.1.6/ui/*/package.json',
'npm:devextreme-angular@23.1.6/package.json',
'npm:devexpress-diagram@2.2.2/package.json',
'npm:devexpress-gantt@4.1.49/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>