DEV Community: Rajeshwari Pandinagarajan

A Complete Guide to Creating a Mind Map Using Angular Diagram Component

Rajeshwari Pandinagarajan — Fri, 23 Dec 2022 11:02:33 +0000

A single mind map can better illustrate concepts or ideas than a thousand words. We can easily display various ideas associated with a specific concept.

The Syncfusion Angular Diagram component is a powerful, extensible, and feature-rich library for visualizing, creating, and editing interactive diagrams.

In this blog, we will see how to create a mind map diagram using the Syncfusion Angular Diagram component.

Create a mind map diagram

The Syncfusion Angular Diagram component provides support to visualize mind maps from external data sources. In addition, data in any format can be easily converted, mapped, and consumed in the Diagram by setting a few properties.

We are going to design the following mind map in this article.

Creating a mind map using the Angular Diagram component

In this image, the ellipse, rectangular boxes, and thick, straight lines with text represent nodes, while the curved lines represent connectors. The text inside the ellipse, rectangular box, and straight lines represent annotations.

Follow these steps to create the mind map diagram using our Angular Diagram component:

First, refer to the Getting started with Angular Diagram component documentation to see the dependent scripts and theme files required to integrate the component into your Angular application.
Second, define the tree information as a JSON array.
Create an instance of the Angular Diagram component.
Then, configure the data to the dataSourceSettings property of the created Diagram instance.
Define the common formatting for all nodes and connectors through the getNodeDefaults and getConnectorDefaults methods, respectively.
After configuring the data source, define the layout type as a mindmap to arrange the nodes’ positions automatically.

The following code example includes all these steps. You can also find the same code on this StackBlitz page.

.html

<div> 
    <ejs-diagram #diagram id="diagram" width="100%" height="700px" [getNodeDefaults]=getNodeDefaults [snapSettings]=snapSettings [scrollSettings]="scrollSettings" [selectedItems]="selectedItems" [getCustomTool]='getCustomTool' (selectionChange)="selectionChange($event)" (created)="create($event)" [tool]=tool [layout]='layout' [dataSourceSettings]='data' [getConnectorDefaults]='getConnDefaults'>
    </ejs-diagram>
</div>

.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
  DiagramComponent,
  Diagram,
  ConnectorModel,
  Connector,
  Node,
  HierarchicalTree,
  DataBinding,
  PointPortModel,
  SnapSettingsModel,
  ScrollSettingsModel,
  PortVisibility,
  MindMap,
  SnapConstraints,
  NodeModel,
  DiagramTools,
  ConnectorConstraints,
  PointPort,
} from '@syncfusion/ej2-angular-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
Diagram.Inject(DataBinding, MindMap, HierarchicalTree);
/**
 * Sample for Mind Map Tree
 */
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('diagram') public diagram: DiagramComponent;
  public tool: DiagramTools = DiagramTools.ZoomPan;
  public Data: object[] = [
    { id: 1, Label: 'Creativity', fill: 'red', branch: 'Root' },
    {
      id: 3,
      Label: 'Brainstorming',
      parentId: 1,
      branch: 'Right',
      fill: 'red',
    },
    { id: 4, Label: 'Complementing', parentId: 1, branch: 'Left', fill: 'red' },
    { id: 22, Label: 'Sessions', parentId: 3, branch: 'subRight', fill: 'red' },
    { id: 23, Label: 'Generate', parentId: 3, branch: 'subRight', fill: 'red' },
    { id: 25, Label: 'Local', parentId: 22, branch: 'subRight' },
    { id: 26, Label: 'Remote', parentId: 22, branch: 'subRight' },
    { id: 27, Label: 'Individual', parentId: 22, branch: 'subRight' },
    { id: 28, Label: 'Teams', parentId: 22, branch: 'subRight' },
    { id: 29, Label: 'Ideas', parentId: 23, branch: 'subRight' },
    { id: 30, Label: 'Engagement', parentId: 23, branch: 'subRight' },
    { id: 31, Label: 'Product', parentId: 29, branch: 'subRight' },
    { id: 32, Label: 'Service', parentId: 29, branch: 'subRight' },
    { id: 33, Label: 'Business Direction', parentId: 29, branch: 'subRight' },
    { id: 34, Label: 'Empowering', parentId: 30, branch: 'subRight' },
    { id: 35, Label: 'Ownership', parentId: 30, branch: 'subRight' },
    { id: 50, Label: 'Information', parentId: 4, branch: 'subLeft' },
    { id: 51, Label: 'Expectations', parentId: 4, branch: 'subLeft' },
    { id: 53, Label: 'Competitors', parentId: 50, branch: 'subLeft' },
    { id: 54, Label: 'Products', parentId: 50, branch: 'subLeft' },
    { id: 55, Label: 'Features', parentId: 50, branch: 'subLeft' },
    { id: 56, Label: 'Other Data', parentId: 50, branch: 'subLeft' },
    { id: 59, Label: 'Organization', parentId: 51, branch: 'subLeft' },
    { id: 60, Label: 'Customer', parentId: 51, branch: 'subLeft' },
    { id: 61, Label: 'Staff', parentId: 51, branch: 'subLeft' },
    { id: 62, Label: 'Stakeholders', parentId: 51, branch: 'subLeft' },
  ];
  //Get mind map data.
  public items: DataManager = new DataManager(this.Data);
  public data: Object = {
    id: 'id',
    parentId: 'parentId',
    dataSource: this.items,
    root: '1',
  };
  //Define layout.
  public layout: Object = {
    type: 'MindMap',
    horizontalSpacing: 40,
    getBranch: (node: NodeModel, nodes: NodeModel[]) => {
      return ((node as Node).data as TreeInfo).branch;
    },
  };
  public snapSettings: SnapSettingsModel = {
    constraints: SnapConstraints.None,
  };
  public scrollSettings: ScrollSettingsModel = {
    scrollLimit: 'Infinity',
  };
  public create(args: Object): void {
    this.diagram.fitToPage();
  }
  //Define node default settings.
  public getNodeDefaults: Function = this.nodeDefaults.bind(this);
  //Define connector default settings
  public getConnDefaults: Function = this.getConnectorDefaults.bind(this);
  private nodeDefaults(obj: NodeModel): NodeModel {
    let treeInfo: TreeInfo = obj.data as TreeInfo;
    obj.shape = { type: 'Basic', shape: 'Ellipse' };
    obj.borderColor = 'black';
    obj.style = {
      fill:
        treeInfo.branch === 'Right' || treeInfo.branch === 'subRight'
          ? '#8E44AD'
          : treeInfo.branch === 'Left' || treeInfo.branch === 'subLeft'
          ? '#3498DB'
          : '#E74C3C',
      strokeColor: 'none',
      strokeWidth: 2,
    };
    obj.annotations = [
      {
        content: (obj.data as TreeInfo).Label,
        margin: { left: 10, right: 10, top: 10, bottom: 10 },
        style: { color: 'white' },
      },
    ];
    let port: PointPortModel[] = this.getPort();
    for (let i: number = 0; i < port.length; i++) {
      obj.ports.push(new PointPort(obj, 'ports', port[i], true));
    }
    return obj;
  }
  //sets connector default value.
  private getConnectorDefaults(
    connector: ConnectorModel,
    diagram: Diagram
  ): ConnectorModel {
    connector.type = 'Bezier';
    connector.targetDecorator = { shape: 'None' };
    let sourceNode: Node = diagram.getObject(connector.sourceID) as Node;
    let targetNode: Node = diagram.getObject(connector.targetID) as Node;
    let treeInfo: TreeInfo = targetNode.data as TreeInfo;
    connector.constraints &= ~ConnectorConstraints.Select;
    if (treeInfo.branch === 'Right' || treeInfo.branch === 'subRight') {
      connector.sourcePortID = sourceNode.ports[0].id;
      connector.targetPortID = targetNode.ports[1].id;
    } else if (treeInfo.branch === 'Left' || treeInfo.branch === 'subLeft') {
      connector.sourcePortID = sourceNode.ports[1].id;
      connector.targetPortID = targetNode.ports[0].id;
    }
    return connector;
  }
  private getPort(): PointPortModel[] {
    let port: PointPortModel[] = [
      {
        id: 'port1',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
      {
        id: 'port2',
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
    ];
    return port;
  }
}
export interface TreeInfo {
  branch: string;
  color: string;
  Left: string;
  Right: string;
  Root: string;
  Label: string;
  Level: string;
}

Interactivity using keyboard and mouse

You can interactively build the mind map diagram using the mouse, touch, and keyboard interfaces. Let’s see how to do so with code examples.

Quick commands

Frequently used commands can be shown as buttons near a selector. You can define the actions as commands for buttons. By doing so, you can perform that action by just clicking the button.

Refer to the following code example and the same on StackBlitz. Here, we have rendered buttons for deleting and left- and right-handling actions.

public handle: UserHandleModel[] = [
    {
      name: 'leftHandle',
      visible: true,
      backgroundColor: 'black',
      offset: 1,
      side: 'Left',
      pathColor: 'white',
      pathData:
        'M11.924,6.202 L4.633,6.202 L4.633,9.266 L0,4.633 L4.632,0 L4.632,3.551 L11.923,3.551 L11.923,6.202Z',
      margin: { top: 0, bottom: 0, left: 0, right: 10 },
      horizontalAlignment: 'Left',
      verticalAlignment: 'Top',
    },
    {
      name: 'delete',
      side: 'Top',
      horizontalAlignment: 'Center',
      verticalAlignment: 'Center',
      pathData:
        'M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76' +
        '96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04' +
        '91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z',
      margin: { top: 0, bottom: 10, left: 0, right: 0 },
      offset: 0.5,
      pathColor: 'white',
    },
    {
      name: 'rightHandle',
      offset: 1,
      horizontalAlignment: 'Right',
      verticalAlignment: 'Top',
      pathColor: 'white',
      pathData:
        'M0,3.063 L7.292,3.063 L7.292,0 L11.924,4.633 L7.292,9.266 L7.292,5.714 L0.001,5.714 L0.001,3.063Z',
      side: 'Right',
      backgroundColor: 'black',
      margin: { top: 0, bottom: 0, left: 10, right: 0 },
    },
  ];
  public selectedItems: SelectorModel = {
    constraints: SelectorConstraints.UserHandle,
    userHandles: this.handle,
  };

Creating mind map using quick commands in Angular Diagram component

Shortcut keys

Using the shortcut keys, you can quickly create mind maps. Based on the specific key gestures, you can specify the actions to be executed.

For example, Tab can be used to add a new topic to the right, Shift+Tab to the left, and Delete to delete the topic and its subtopics.

Refer to the following code example and the same on StackBlitz.

 this.diagram.commandManager = {
      commands: [
        {
          gesture: { key: Keys.Tab },
          canExecute: this.canExecute.bind(this),
          execute: this.addLeftChild.bind(this),
          name: 'leftChild',
        },
        {
          gesture: { key: Keys.Tab, keyModifiers: KeyModifiers.Shift },
          canExecute: this.canExecute.bind(this),
          execute: this.addRightChild.bind(this),
          name: 'rightChild',
        },
        {
          gesture: { key: Keys.Delete },
          canExecute: this.canExecute.bind(this),
          execute: this.removeChild.bind(this),
          name: 'deleteChid',
        },
      ],
    };
private addLeftChild() {
    let selectedObject: any = this.diagram.selectedItems.nodes;
    if (selectedObject[0]) {
      if (selectedObject[0] instanceof Node) {
        let node: NodeModel = addNode();
        let empInfo: EmployeeInfo = selectedObject[0].data as EmployeeInfo;
        if (empInfo.branch === 'Root') {
          (node.data as EmployeeInfo).branch = 'Right';
        } else if (
          empInfo.branch === 'Right' ||
          empInfo.branch === 'subRight'
        ) {
          (node.data as EmployeeInfo).branch = 'subRight';
        } else if (empInfo.branch === 'Left' || empInfo.branch === 'subLeft') {
          (node.data as EmployeeInfo).branch = 'subLeft';
        }
        let connector: ConnectorModel = addConnector(selectedObject[0], node);
        this.diagram.clearSelection();
        let nd: Node = this.diagram.add(node) as Node;
        this.diagram.add(connector);
        this.diagram.doLayout();
        this.diagram.startTextEdit(nd);
      }
    }
  }
  private addRightChild() {
    let selectedObject: any = this.diagram.selectedItems.nodes;
    if (selectedObject[0]) {
      if (selectedObject[0] instanceof Node) {
        let node: NodeModel = addNode();
        let empInfo: EmployeeInfo = selectedObject[0].data as EmployeeInfo;
        if (empInfo.branch === 'Root') {
          (node.data as EmployeeInfo).branch = 'Left';
        } else if (empInfo.branch === 'Left' || empInfo.branch === 'subLeft') {
          (node.data as EmployeeInfo).branch = 'subLeft';
        } else if (
          empInfo.branch === 'Right' ||
          empInfo.branch === 'subRight'
        ) {
          (node.data as EmployeeInfo).branch = 'subRight';
        }
        let connector: ConnectorModel = addConnector(selectedObject[0], node);
        this.diagram.clearSelection();
        let nd: Node = this.diagram.add(node) as Node;
        this.diagram.add(connector);
        this.diagram.doLayout();
        this.diagram.startTextEdit(nd);
      }
    }
  }
  private removeChild() {
    let selectedObject: any = this.diagram.selectedItems.nodes;
    if (selectedObject[0]) {
      if (selectedObject[0] instanceof Node) {
        let node: Node = selectedObject[0] as Node;
        this.removeSubChild(node);
      }
      this.diagram.doLayout();
    }
  }
  //Remove the subchild Elements
  private removeSubChild(node: Node): void {
    for (let i: number = node.outEdges.length - 1; i >= 0; i--) {
      let connector: Connector = this.diagram.getObject(
        node.outEdges[i]
      ) as Connector;
      let childNode: Node = this.diagram.getObject(connector.targetID) as Node;
      if (childNode.outEdges.length > 0) {
        this.removeSubChild(childNode);
      } else {
        this.diagram.remove(childNode);
      }
    }
    this.diagram.remove(node);
  }

Creating a Mind Map using Keyboard Shortcuts in Angular Diagram Component

Expand and collapse children nodes

Use the expandIcon and collapseIcon properties of nodes to implement the expand and collapse features in the mind map’s children nodes.

Refer to the following example and the same on StackBlitz.

private getNodeDefaults(obj: NodeModel): NodeModel {
    ........ 
        obj.expandIcon = {
          shape: 'Minus',
        };
        obj.collapseIcon = {
          shape: 'Plus',
        };
    ........ 
    return obj;
  }

Expanding and collapsing nodes in a mind map using Angular Diagram component

Drag and drop

You can easily change the mind map layout by dragging a topic or subtopic and dropping it on the required location.

Add the following code to the Diagram control’s drop method to enable editing in the mind map’s tree structure. Also, the same code is available on StackBlitz.

public drop(args): void {
    if (args.target && args.target instanceof Node) {
      let connector: ConnectorModel = this.diagram.getObject(
        args.element.inEdges[0]
      );
      connector.sourceID = args.target.id;
      this.diagram.dataBind();
      this.diagram.doLayout();
      //Update connector connection direction.
      let srcNode: NodeModel = args.element;
      let targetNode: NodeModel = args.target;
      let srctreeInfo: TreeInfo = srcNode.data as TreeInfo;
      let targettreeInfo: TreeInfo = targetNode.data as TreeInfo;
      if (
        (srctreeInfo.branch === 'Right' || srctreeInfo.branch === 'subRight') &&
        (targettreeInfo.branch === 'Left' ||
          targettreeInfo.branch === 'subLeft')
      ) {
        connector.sourcePortID = targetNode.ports[1].id;
        connector.targetPortID = srcNode.ports[0].id;
        this.updateRightTopicOutEdges(srcNode);
      } else if (
        (srctreeInfo.branch === 'Left' || srctreeInfo.branch === 'subLeft') &&
        (targettreeInfo.branch === 'Right' ||
          targettreeInfo.branch === 'subRight')
      ) {
        connector.sourcePortID = targetNode.ports[0].id;
        connector.targetPortID = srcNode.ports[1].id;
        this.updateLeftTopicOutEdges(srcNode);
      }
      // update your local data source when modifying mind map topics.
      this.updateDataSource(args.element, args.target);
    }
  }
  private updateRightTopicOutEdges(node: NodeModel) {
    for (var i = 0; i < (node as Node).outEdges.length; i++) {
      let outconnector: ConnectorModel = this.diagram.getObject(
        (node as Node).outEdges[i]
      );
      outconnector.sourcePortID = 'port2';
      outconnector.targetPortID = 'port1';
      let targetNode: NodeModel = this.diagram.getObject(outconnector.targetID);
      if ((targetNode as Node).outEdges) {
        this.updateRightTopicOutEdges(targetNode);
      }
    }
  }
  private updateLeftTopicOutEdges(node: NodeModel) {
    for (var i = 0; i < (node as Node).outEdges.length; i++) {
      let outconnector: ConnectorModel = this.diagram.getObject(
        (node as Node).outEdges[i]
      );
      outconnector.sourcePortID = 'port1';
      outconnector.targetPortID = 'port2';
      let targetNode: NodeModel = this.diagram.getObject(outconnector.targetID);
      if ((targetNode as Node).outEdges) {
        this.updateLeftTopicOutEdges(targetNode);
      }
    }
  }
  private updateDataSource(source, target): void {
    let updateData = this.Data.find(function (element) {
      return element.id === source.data.id;
    });
    if (updateData) {
      updateData.parentId = target.data.id;
    }
  }

Dragging and dropping nodes in a mind map using Angular Diagram component

Mind map shape customization

You can easily customize the appearance of each level of nodes by adding backgrounds, border styles, text styles, and images and visualize them with a custom UI design.

The getNodeDefaults method lets you specify a custom shape and style for each node based on its level value.

Refer to the following code example and the same on StackBlitz.

private getNodeDefaults(obj: NodeModel): NodeModel {
    obj.constraints = NodeConstraints.Default & ~NodeConstraints.Drag;
    let empInfo: TreeInfo = obj.data as TreeInfo;
    if (
      empInfo.branch === 'Root' ||
      empInfo.branch === 'Left' ||
      empInfo.branch === 'Right'
    ) {
      obj.shape = {
        type: 'Basic',
        shape: empInfo.branch === 'Root' ? 'Ellipse' : 'Rectangle',
      };
      obj.borderColor = 'black';
      obj.style = {
        fill: empInfo.branch === 'Root' ? '#E74C3C' : '#F39C12',
        strokeColor: 'none',
        strokeWidth: 2,
      };
      obj.annotations = [
        {
          content: empInfo.Label,
          margin: { left: 10, right: 10, top: 10, bottom: 10 },
          style: { color: 'white' },
        },
      ];
      if (empInfo.branch === 'Left' || empInfo.branch === 'Right') {
        obj.height = 40;
        obj.width = 100;
      }
    } else {
      let color: string =
        empInfo.branch === 'subRight'
          ? empInfo.Level === '2'
            ? 'Green'
            : '#8E44AD'
          : empInfo.Level === '2'
          ? 'Green'
          : '#3498DB';
      obj.shape = {
        type: 'Basic',
        shape: empInfo.Level === '2' ? 'Ellipse' : 'Rectangle',
      };
      obj.style = { fill: color, strokeWidth: 0 };
      obj.minWidth = 100;
      obj.height = empInfo.Level === '2' ? 30 : 4;
      obj.annotations = [
        {
          content: empInfo.Label,
          offset: empInfo.Level === '2' ? { x: 0.5, y: 0.5 } : { x: 0.5, y: 0 },
          verticalAlignment: empInfo.Level === '2' ? 'Center' : 'Bottom',
          style: { color: empInfo.Level === '2' ? 'white' : 'black' },
        },
      ];
      (obj.shape as TextModel).margin = {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      };
    }
    let port: PointPortModel[] = this.getPort();
    for (let i: number = 0; i < port.length; i++) {
      (obj as any).ports.push(new PointPort(obj, 'ports', port[i], true));
    }
    return obj;
  }
  //sets connector default value
  private getConnectorDefaults(
    connector: ConnectorModel | any,
    diagram: Diagram
  ): ConnectorModel {
    let sourceNode: Node = diagram.getObject(connector.sourceID) as Node;
    let targetNode: Node = diagram.getObject(connector.targetID) as Node;
    let empInfo: TreeInfo = targetNode.data as TreeInfo;
    connector.type = 'Bezier';
    connector.targetDecorator = { shape: 'None' };
    connector.constraints &= ~ConnectorConstraints.Select;
    if (empInfo.branch === 'Right' || empInfo.branch === 'subRight') {
      connector.sourcePortID = sourceNode.ports[0].id;
      connector.targetPortID = targetNode.ports[1].id;
      connector.style = { strokeWidth: 5, strokeColor: '#8E44AD' };
    } else if (empInfo.branch === 'Left' || empInfo.branch === 'subLeft') {
      connector.sourcePortID = sourceNode.ports[1].id;
      connector.targetPortID = targetNode.ports[0].id;
      connector.style = { strokeWidth: 5, strokeColor: '#3498DB' };
    }
    return connector;
  }
  private getPort(): PointPortModel[] {
    let port: PointPortModel[] = [
      {
        id: 'port1',
        offset: { x: 0, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
      {
        id: 'port2',
        offset: { x: 1, y: 0.5 },
        visibility: PortVisibility.Hidden,
        style: { fill: 'black' },
      },
    ];
    return port;
  }

Customizing the shapes in a mind map using the Angular Diagram component

Spacing

Adjust the spacing between each level of the mind map diagram horizontally and vertically. You can also define a margin around the mind map diagram, like in the following code example.

public layout: Object = {
    type: 'MindMap',
    horizontalSpacing: 80,
    verticalSpacing: 80,
    getBranch: (node: NodeModel, nodes: NodeModel[]) => {
      return ((node as Node).data as TreeInfo).branch;
    },
  };

Customizing the spacing between nodes in a mind map using the Angular Diagram component

Zooming and panning

Viewing a large mind map on a small screen can be challenging. In that case, zooming and panning help us provide a more detailed view of the mind map.

You can zoom in and out of the diagram using the Ctrl + mouse wheel shortcut key.

Refer to the following code examples and the same on StackBlitz to enable zooming and panning support in the mind map diagram.

.html

<div class="col-lg-8 control-section" style="width: 100%;">
  <div class="content-wrapper">
    <ejs-diagram
      #diagram
      id="diagram"
      width="100%"
      height="700px"
      [getNodeDefaults]="getShapeDefaults"
      [snapSettings]="snapSettings"
      [scrollSettings]="scrollSettings"
      [tool]="tool"
      [layout]="layout"
      [dataSourceSettings]="data"
      [getConnectorDefaults]="getConnDefaults"
    >
    </ejs-diagram>
  </div>
</div>

.ts

//Enable pan tool.
  public tool: DiagramTools = DiagramTools.ZoomPan;

Zooming and panning in a mind map using Angular Diagram component

Exporting

You can easily export the mind map diagram to different image formats such as PNG, JPEG, BMP, and SVG.

Refer to the following code example and the same on StackBlitz to explore this feature.

let exportOptions: IExportOptions = {};
    exportOptions.format = args.item.text as FileFormats;
    exportOptions.mode = 'Download';
    exportOptions.region = 'Content';
    exportOptions.multiplePage = false;
    exportOptions.fileName = 'Mindmap';
    this.diagram.exportDiagram(exportOptions);

Conclusion

Thanks for reading! In this blog post, we have seen how to create and customize a mind map using the Syncfusion Angular Diagram component. With the same component, you can also create flowcharts, organizational charts, floor plans, UML diagrams, and BPMN charts. Try out the steps in this blog and provide your feedback in the comments section!

If you would like to try out the Diagram, You can download our free trial. You can also look at the Diagram source on GitHub and check our live demo and documentation for detailed explanations.

Related blogs

Introducing the New Angular Image Editor Component

Rajeshwari Pandinagarajan — Fri, 11 Nov 2022 12:19:27 +0000

We are happy to introduce the new Angular Image Editor component with our latest release, 2022 Volume 3!

Let’s explore its features and UI design!

Image Editor overview

The Angular Image Editor is a graphical user interface for editing images. It provides built-in support to rotate, flip, zoom, and crop images. Users can insert annotations including text, freehand drawings, and shapes such as rectangles, ellipses, and lines. Also, the control supports keyboard interactions, events, and an optimized UI for touch gestures.

The following GIF image shows some of its features in action.

Angular Image Editor Component

Use cases

The Angular Image Editor is a great fit for the following applications:

Profile pictures : Crop any image and use it as your profile picture through the component’s user-friendly APIs. You can customize the Image Editor’s capabilities for this use by changing its toolbar or using external buttons.
Photo editor : Use all the common image editing features built into the component’s toolbar. You can easily integrate the Image Editor into web or mobile applications to provide image editing capabilities.

Key features

The following are the key features available in the Angular Image Editor component:

Load and save an image.
Select and crop an image.
Transform an image.
Annotate an image.
Zoom and pan an image.
Customize the toolbar.
Responsive, touch-friendly UI.

Let’s see how these features work with code examples.

Load and save an image

The Image Editor component can open base64, image data, or hosted and online URL images using the open ** method. You can also open an image by clicking the **Open button in the toolbar. The supported file types are PNG, JPEG, SVG, and base64.

Users can also edit images and save them as ImageData using the getImageData method. To save images in PNG, JPEG, and SVG formats, users can use the export method, which accepts file type and file name as parameters.

In the following code example, the open method is used to open a hosted image.

<div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
</div>

export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
}

The output of this code example is shown in the following image.

Viewing an Image Using Angular Image Editor

Note: To view hosted images, you need to enable the Directory Browsing option in IIS , which creates a web.config file inside the hosted folder. Add the following code in the web.config file to resolve the CORS issue.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
 <system.webServer>
 <directoryBrowse enabled="true" />
  <httpProtocol>
   <customHeaders>
    <clear />
    <add name="Access-Control-Allow-Origin" value="*" />
   </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>

Selection and cropping

The Image Editor component supports multiple selection options including square, circle, and custom shapes. It can also handle various aspect ratios. You can crop an image by dragging and resizing the selection region. You can perform selection by either using the toolbar or the select method.

In the select method, we have to specify the selection type (custom, square, or circle) and aspect ratios (3:2, 4:3, 5:4, 7:5, or 16:9).

In the toolbar , we can perform selection by just clicking the Crop dropdown button and picking a selection shape (custom, square, or circle) and aspect ratio.

Cropping

The Angular Image Editor can crop any image based on a user-defined selection. The cropping can be made by either using the toolbar or the crop method.

In the toolbar , we can perform cropping by clicking the *OK * button that is enabled after the user selects a part of the image.

In the following code example, we have used the select and crop methods to perform circular selection and crop the image.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="select()">Select</button>
  <button class="e-btn" (click)="crop()">Crop</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>
export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public select = (): void => {
  this.ImageEditorInstance.select('circle');
 }
 public crop = (): void => {
  this.ImageEditorInstance.crop();
 }
}

Cropping an Image Using Angular Image Editor

Transform an image

The Angular Image Editor component has rotate and flip transformation support. The rotation transformation allows users to rotate an image clockwise or counterclockwise 90, 180, 270, or 360 degrees. The flip transformation supports horizontal and vertical orientations. We can perform both transformations by either using the toolbar or the rotate and flip methods.

In the toolbar , we can perform rotate and flip actions by clicking the Transform dropdown button and selecting one of the Rotate Left , Rotate Right , Horizontal Flip , or Vertical Flip options.

In the following code example, the rotate and flip methods are used to perform rotation and flip actions.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="rotate()">Rotate</button>
  <button class="e-btn" (click)="flip()">Flip</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>


export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public rotate = (): void => {
  this.ImageEditorInstance.rotate(90);
 }
 public flip = (): void => {
  this.ImageEditorInstance.flip("Vertical");
 }
}

Rotate and Flip Options in Angular Image Editor

Annotations

The Angular Image Editor component supports multiple types of annotations, including text, freehand drawings, and shapes such as rectangles, ellipses, and lines.

Text

You can insert a text annotation and customize it by changing its color, font family, font size, and font styles, such as bold and italic. You can add a text annotation by either using the toolbar or the drawText method.

In the drawText method, you can insert a text annotation by specifying the text, font family, font size, and font styles.

In the toolbar, we can insert a text annotation by just clicking the Annotation dropdown button and picking the Add Text option. Once the text is inserted, the contextual toolbar will be enabled to customize the annotation’s color, font family, font size, and font styles, such as bold and italic.

Shapes

You can insert and customize the shape annotations such as rectangles, ellipses, and lines by changing their stroke color, fill color, and stroke width. Shape annotations can be made by either using the toolbar or the drawRectangle , drawEllipse , and drawLine methods.

In the toolbar , we can insert the shape annotations by clicking the Annotation dropdown button and picking either the Rectangle** , **** Ellipse ***,* or Line options. Once the shape is inserted, the contextual toolbar will be enabled to customize the annotation’s stroke color, fill color, and stroke width.

In the following code example, the drawText method is used to insert text, and the drawRectangle** , **** drawEllipse ***,* and drawLine methods are used to insert the respective annotation shapes.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="text()">Add Text</button>
  <button class="e-btn" (click)="rectangle()">Rectangle</button>
  <button class="e-btn" (click)="ellipse()">Ellipse</button>
  <button class="e-btn" (click)="line()">Line</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>

export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public text = (): void => {
  this.ImageEditorInstance.drawText(50, 50, 'Syncfusion');
 }
 public rectangle = (): void => {
  this.ImageEditorInstance.drawRectangle(50, 300);
 }
 public ellipse = (): void => {
  this.ImageEditorInstance.drawEllipse(1000, 300);
 }
 public line = (): void => {
  this.ImageEditorInstance.drawLine(1000, 150);
 }
}

Text and Shapes Annotation Feature in Angular Image Editor

Freehand drawing

You can easily insert a freehand drawing annotation and customize it by changing its stroke color and stroke width. The freehand drawing annotation can be made by either using the toolbar or the freehandDraw method.

In the toolbar , you can insert the freehand draw annotation by clicking the Annotation dropdown button and picking the Freehand Draw option. Once the freehand draw option is enabled, the contextual toolbar will be enabled to customize the stroke color and width.

In the following code example, the freehandDraw method is used to toggle the freehand drawings.

<div>
 <div style=”padding-bottom: 10px;”>
  <button class=”e-btn” (click)=”freehanddraw()”>Freehand Draw</button>
 </div>
 <div id=”wrapperDiv” style=”width:550px; height:350px;”>
  <ejs-imageeditor (created)=”created()” #ImageEditor [toolbar]=’toolbarItems’></ejs-imageeditor>
 </div>
</div>

export class AppComponent {
 @ViewChild(‘ImageEditor’)
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open(“http://localhost:6969/image/bridge.png”);
 }
 public freehanddraw = (): void => {
  this.ImageEditorInstance.freeHandDraw(true);
 }
}

Freehand Drawing Annotation Feature in Angular Image Editor

Zooming and panning an image

The Angular Image Editor allows users to zoom and pan an image. You can perform zooming and panning by either using the toolbar or the zoom and pan method.

In the toolbar , we can perform zooming by clicking the Zoom In and Zoom Out ** buttons, which enable the **Pan option in the toolbar.

In the following code example, the zoomIn** , **** zoomOut ***,* and pan methods are used to perform zooming in, zooming out, and panning the image, respectively.

<div>
 <div style="padding-bottom: 10px;">
  <button class="e-btn" (click)="zoomIn()">Zoom In</button>
  <button class="e-btn" (click)="zoomOut()">Zoom Out</button>
  <button class="e-btn" (click)="pan()">Pan</button>
 </div>
 <div id="wrapperDiv" style="width:550px; height:350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor [toolbar]='toolbarItems'></ejs-imageeditor>
 </div>
</div>

export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public zoomIn = (): void => {
  this.ImageEditorInstance.zoom(0.1);
 }
 public zoomOut = (): void => {
  this.ImageEditorInstance.zoom(-0.1);
 }
 public pan = (): void => {
  this.ImageEditorInstance.pan(true);
 }
}

Zooming and Panning Features in Angular Image Editor

Toolbar customization

You can customize the built-in toolbar using the toolbar property. A contextual toolbar is enabled while inserting annotations. You can also customize the toolbar by using the toolbarUpdating event.

In the following code example, the annotate option is only enabled with text, rectangle, and ellipse options using the toolbar property, and the contextual toolbar for the rectangle annotation is rendered with only stroke color by excluding fill color and stroke width using the toolbarUpdating event.

<div>
 <div id=”wrapperDiv” style=”width:550px; height:350px;”>
  <ejs-imageeditor (toolbarUpdating)=”toolbarUpdating($event)” (created)=”created()” #ImageEditor [toolbar]=’toolbarItems’></ejs-imageeditor>
 </div>
</div>

export class AppComponent {
 @ViewChild(‘ImageEditor’)
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = [‘Annotate’, ‘Text’, ‘Rectangle’, ‘Ellipse’];
 public created = (): void => {
  this.ImageEditorInstance.open(“http://localhost:6969/image/bridge.png”);
 }
 public toolbarUpdating = (args: ToolbarEventArgs): void => {
  if (args.toolbarType === ‘shapes’) {
   args.toolbarItems = [‘strokeColor’];
  }
 }
}

Customizing the Toolbar in Angular Image Editor

Toolbar template

Also, users can replace the toolbar of the Image Editor with the user-specific UI using the toolbarTemplate property.

Refer to the following code example.

<div>
 <div id="wrapperDiv" style="width: 550px; height: 350px;">
  <ejs-imageeditor (created)="created()" #ImageEditor>
   <ng-template #toolbarTemplate let-data>
    <div style="padding: 10px; border-bottom: 1px solid darkgray;">
     <button class="e-btn" (click)="text()">Add Text</button>
     <button class="e-btn" (click)="rectangle()">Rectangle</button>
     <button class="e-btn" (click)="line()">Line</button>
    </div>
   </ng-template>
  </ejs-imageeditor>
 </div>
</div>

export class AppComponent {
 @ViewChild('ImageEditor')
 public ImageEditorInstance!: ImageEditorComponent;
 public toolbarItems: string[] = ['Annotate', 'Text', 'Rectangle', 'Ellipse'];
 public created = (): void => {
  this.ImageEditorInstance.open("http://localhost:6969/image/bridge.png");
 }
 public text = (): void => {
  this.ImageEditorInstance.drawText(50, 50, 'Syncfusion');
 }
 public rectangle = (): void => {
  this.ImageEditorInstance.drawRectangle(50, 300);
 }
 public line = (): void => {
  this.ImageEditorInstance.drawLine(1000, 150);
 }
}

Customizing the Toolbar with the Toolbar Template Option in Angular Image Editor

Adaptive and touch-friendly UI

By default, the Angular Image Editor adapts to all mobile devices based on the screen size. It is a touch-friendly component, so users can use their finger, a pen, or a mouse device on desktop and mobile devices to edit the image.

Adaptive and Touch-Friendly UI in Angular Image Editor

How to use it

We have a set of resources for you, including our Angular Image Editor live demos and documentation that explains our customization features.

Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the design and features of our new Angular Image Editor component. If you would like to give it a try, please download the latest available version of Essential Studio, 2022 Volume 3 . Experience wonderful image editing with this component and provide your valuable feedback in the comments section below.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Deploying a .NET Core Application in Azure Kubernetes

Rajeshwari Pandinagarajan — Thu, 10 Nov 2022 12:43:53 +0000

In development, maintaining the release and deployment workflow is one of the most critical areas of a project. Therefore, many teams like to create an automated deployment workflow to manage their releases and production. Maintaining an automated deployment workflow can be complex, but it will save the team time and effort.

Azure DevOps is one of the best platforms to create an automated CI/CD pipeline for an application, making this job easy. This article will discuss the steps to deploy a .NET Core application in Azure Kubernetes using the Azure DevOps Starter.

Prerequisites

What Are Containers and Container Orchestration?

To understand the functionality of Kubernetes, you must first understand the concepts of containers and container orchestration.

Containers are a form of the virtualized operating system. A container contains all essential executables, binary code, dependencies, and configuration files. A single container can execute anything from a microservice or software process to a considerably large application.

Containers seem to be very scalable since they can be produced as needed. But the complexity increases when you must maintain hundreds or thousands of containers, and it becomes impossible to manage all their lifecycles. This is the situation in which container orchestration comes to the rescue.

Containers’ maintenance, deployment, scaling, and networking can be automated using a container orchestration system. In addition, you can deploy the same application across multiple environments using container orchestration rather than having to redevelop or redesign it.

What Is Kubernetes?

Kubernetes, also known as K8s, is a well-known open-source container management (orchestration) technology for automating applications’ deployment, scaling, and administration.

The Kubernetes orchestration features allow the development of application services that span across many containers, the scheduling of containers in a cluster, the deployment of those containers, and control of the status of the containers over time.

What Is Azure Kubernetes Service?

Developed on top of the open-source Kubernetes technology, Azure Kubernetes Service (AKS) is a managed container orchestration service. You can use AKS to administer your hosted Kubernetes environment and easily launch, scale, and manage containerized apps.

Through on-demand resource provisioning, updating, and scaling, AKS simplifies Kubernetes deployment and operation. It enables you to execute your applications in the cloud while eliminating the complexity and operational burden of Kubernetes management.

In addition, your development and operations teams can collaborate on a single platform using AKS to build and deploy applications more efficiently.

How to Deploy a .NET Core Application in Azure Kubernetes

Step 1: Create an Azure DevOps starter project.

Sign in to your Azure portal, click the Create a resource option, and select DevOps Starter. Then, you’ll be navigated to where you can create the DevOps Starter project. You have to complete four main steps to create the project.

a. Choose the runtime.

Select the .NET runtime, as shown in the following figure, to run the ASP.NET Core application

b. Choose the framework.

Select ASP.NET Core as the framework for the runtime, as shown in the following figure.

c. Choose the service.

Then, select Kubernetes as the Azure service to deploy this application.

d. Create the project with the necessary configurations.

Now, configure the Azure subscription and settings for the Kubernetes cluster. I will explain these configurations in the upcoming step.

Step 2: Configure the subscription and Azure Kubernetes service.

We need to do a few configurations in the fourth part of creating the DevOps Starter project. We’ll use GitHub to create a repository for this project. As shown in the following figure, you need to authorize access to Azure for your GitHub personal account.

There are some other configurations to be done after authorizing the GitHub account. First, select the organization. Here, selects your GitHub account as a personal account. There is a field named Repository in the next figure: use it to add the name of the repository to be created in the GitHub account. This repository will be used to deploy the Azure Kubernetes service. Then, select the subscription for the DevOps Starter project. I will be using the Azure for Students subscription for this demonstration.

Then, create a new cluster or use one you have already created.

If you are going to create a new cluster for this project, first add a name for the cluster. Then, select the location in which to create this service. After, select Standard_B2ms , based on the B-series burstable VMs, as the virtual machine size. Use this VM to create the service for testing and demonstration purposes.

Add additional settings if you need them according to your requirements or subscription plan. For example, if you are using a student subscription, you can adjust the settings as shown in the following image.

The student subscription has some limitations. You have to set the node count to 1 and choose the Basic service tier for the Container Registry SKU, as it is a cost-optimized tier suitable for learning and testing purposes.

Finally, click Review+Create to create the Azure DevOps Starter project, which will deploy the ASP.NET Core application in the Azure Kubernetes service. It will take a few minutes to create the project.

After a few minutes, check your GitHub repository to make sure a new repository was created with the name you provided. You can see the workflow that has been automatically created for the GitHub action. It will be used to automate the CI/CD pipeline. You can also customize it if needed.

The Azure resources and the status of the GitHub workflow will also be visible in the Azure portal after deploying it to the Kubernetes service, as shown in the following image.

Furthermore, you can access the ASP.NET Core application using the external endpoint. There, you will see the application as shown in the following figure.

Step 3: Check the CI/CD pipeline.

Now, check the CI/CD pipeline you created using the Azure DevOps Starter by cloning the ASP.NET Core project to your local machine with the help of the following git command.

git clone {git-repo-link}.git

For the ease of viewing and editing files, let’s use Visual Studio Code 2022 to open the cloned application. Then, open the file named index.html inside the Pages folder.

Then, you can edit it as you need. To demonstrate how the changes will activate the CI/CD pipeline, let’s change the

div element as shown in the following code snippet.

<div class="content-body">
   <div class="success-text">Success!</div>
   <div class="description line-1">GitHub workflow has been successfully setup</div>
   <div class="description line-2">Deploying DotNet Core Application In Azure Kubernetes</div>
</div>

Then, run and check it locally. After that, push the latest changes with a commit. First, add the changes to the staging area.

git add

Second, commit the changes with an appropriate commit message into the local repository.

git commit -m "Update index.html"

Third, push the commits to the GitHub repository.

git push -u origin main

The GitHub action will trigger the build pipeline after successfully pushing the commits.

After completing the build process, it will deploy the application to the Azure Kubernetes service.

You can check your Azure Kubernetes service after deploying the application to it by clicking the external endpoint, as shown in the following figure.

Here, you see that the latest version of the application was deployed successfully to the Azure Kubernetes service.

Conclusion

This article discussed how to deploy an ASP.NET Core app to the Azure Kubernetes service using the Azure DevOps Starter, with the help of GitHub actions, to create an automated CI/CD pipeline for the app. This process eliminates the complexity of the deployment process significantly.

I hope this article will help you in your next project.

The Syncfusion ASP.NET Core UI control library, powered by Essential JS 2, is the only suite you will ever need to build an app. It contains over 70 high-performance, lightweight, modular, and responsive UI controls in a single package. Use them to build stunning web apps!

If you’re already a Syncfusion user, you can download the product setup . If not, you can download a free 30-day trial to evaluate our products.

You can contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Thank you for reading!

Related blogs

JavaScript Debugging with VS Code and Chrome

Rajeshwari Pandinagarajan — Thu, 10 Nov 2022 11:45:38 +0000

Debugging is a vital part of identifying why your application is misbehaving. We feel great satisfaction once we find the bug in our code and fix it.

No matter how skilled we get as developers, we still have to spend countless hours fixing bugs in our code. Thus, we should work on improving our debugging skills. If you work with JavaScript, you know it is not always cooperative. Fortunately, several JS debugging tools are accessible, usually making troubleshooting straightforward.

This article will discuss how we can debug JavaScript using the simple and efficient tools in Visual Studio Code and Google Chrome.

Debugging Methods for JavaScript

Breakpoints

A breakpoint is where a line of code causes the debugger to pause JavaScript execution. We can examine current variables and run commands in the console while the code is paused. To put it another way, we can debug it. A list of breakpoints is always available in the right panel of Chrome DevTools. This is useful when we have a lot of breakpoints in different files.

Debugger Keyword

In JavaScript, we can also use the debugger keyword. The keyword causes code execution to pause. However, the browser will ignore such a command unless the development tools are open. See the following example.

function writefunction() 
{
  console.log("Stop Executing write function!");
  debugger; // <-- the debugger stops here
}
helloWorld();

Backtracking

Backtracking is the process of applying potential solutions to a problem in a JavaScript program. The procedure begins at the location where a specific error is discovered. From there, the complete source code is traced backward. The stages involved in this are:

Identify the callers of each function.
Determine whether any issues connected to that function have occurred there.

If not, you go back to the caller of that function. If it doesn’t work, you retreat and try again.

Keep repeating this until the error is removed and the expected output is obtained.

Strict Mode

Using JavaScript’s strict mode makes writing standardized and readable JavaScript programs easier. We can put a program under a strict operating perspective by using strict mode. This strict context forbids specific actions and throws exceptions. It helps reduce bugs and keep the code clean. For example, JavaScript will throw an error in strict mode if we assign values to undeclared variables. The use strict statement enables the strict mode.

Debugging JavaScript in VS Code

VS Code provides easy and straightforward solutions for debugging. Visual Studio Code debuggers support many languages and platforms, which are either built-in or accessed by extensions. Let’s work on VS Code debugging with sample JavaScript code.

const hotels = [];
export function addHotel(hotel, stars) 
{
    const id = ++hotels.length;
    let numType = 'odd';
    if (id % 2) 
    {
        numType = 'even';
    }
    hotels.push({ id, hotel, stars, numType, });
}

In this example, you will notice some common bugs. Let’s ignore them for now and add some lines to test the code manually.

addHotel('Kingsburry', '5');
addHotel('Hilton', '5');
addHotel('Cinnamon Grand', '5');

Now, let’s use VS Code’s built-in *breakpoints * to break the program’s execution wherever we want to test when the bugs occur.

We discussed breakpoints. As you can see in the previous code, the red dots on the left side of VS Code editor are the breakpoints. You can add these by clicking on the panel to the left of the line numbers. Then, on the action bar, click the debug icon.

Take a look at the top section. You will notice a gear icon. Click it. A debug configuration file named launch.json will be prompted. Update the configuration with reference to the following code to enable the VS Code debugger on App.js.

"configurations": [
   {
      "type": "node",
      "request": "launch",
      "name": "Launch App",
      "program": "${workspaceFolder}\\debugapp\\src\\App.js"
   }
]

Now, click the play icon at the top of the debugger panel. A toolbar will appear at the top of the VS Code. The toolbar will contain several icons you can use to manipulate the debugging process.

In the previous screenshot, you’ll notice that the debugger has paused on your first breakpoint. To continue the session, press the play icon, which will cause execution to continue until it reaches the next breakpoint. Clicking the play icon again will finish the execution and end the debugging session. Let’s understand what the sections on the left pane provide us with:

Variables : displays the current scope’s local and global variables (at the point of execution).
Watch: you can manually enter expressions for variables you want to monitor.
Call Stack: displays the highlighted code’s call stack.
Breakpoints: shows a list of files with breakpoints and their line numbers.

Debug with Watch

The watch panel tracks expressions in our code. The expression will be evaluated on whether it satisfies the criteria set here. You can watch a new expression by clicking the + in the panel and entering an expression.

Conditional Breakpoints

Watching variables alone isn’t always enough. For example, say we wish to pause the debugging only if a specific requirement is met. Add a standard breakpoint to accomplish this. After adding the breakpoint, right-click on it, choose Edit Breakpoint , and add the conditional statement expression for which you need to pause the debugging.

Call Stack

The call stack helps trace exceptions and determine who called what. You can select an item listed in this pane to see who called it.

Another tool in your VS Code toolbox for debugging is using the debug console. Although it may occasionally be excessive, it will frequently save you time when looking for bugs.

Debugging JavaScript with Google Chrome

The majority of IDEs and almost all recent browsers include debugging tools, which makes debugging much more straightforward. The browsers also allow for step-by-step code tracing to pinpoint the exact cause of the error. Google Chrome, which many developers use, provides us with debugging solutions for JavaScript. In addition, Chrome provides debugger extensions for VS Code and Chrome DevTools. Chrome DevTools comes built-in with the Google Chrome browser.

Chrome Debugger for VS Code

Chrome’s debugger helps debug client-side JavaScript code, which runs in Google Chrome straight from VS Code. The Chrome debugger is an extension that needs to be installed in VS Code.

The debugger usually connects to Chrome over its Chrome Debugger Protocol, where files loaded in the browser are mapped to the files opened in VS Code. You can set breakpoints directly in the source code and set up variables to watch along with the entire call stack when debugging without leaving the editor.

Due to the inclusion of a JavaScript debugger in Visual Studio Code, this extension is no longer supported (deprecated) there. The JavaScript debugger fixes problems with Node.js, Chrome, Edge, WebView2, VS Code extensions, and other programs. You can remove the Chrome debugger extension without risk and still have access to the required capabilities.

Chrome Developer Tools

The finest debugging tool is already included with your Chrome browser, whether you’re working with Angular, React, or Vue applications. The Google Chrome browser includes developer tools (also known as DevTools) that allow developers to edit code directly in the browser, add breakpoints to detect issues, and debug their code more quickly.

To open the DevTools Elements panel, press Command + Option + C on a Mac or CTRL + SHIFT + C on any other operating system.

Let’s review some practical strategies for debugging your code more efficiently with DevTools.

Adding Breakpoints in DevTools

Navigate to the Sources tab in the DevTools.
In the navigation panel on the left side, select the .js file. The code of the selected .js file will be displayed in the middle panel.
Right-click on the line where you want to add the breakpoint. Then, in the dropdown list, select Add breakpoint. A blue color breakpoint will be displayed, as shown in the following image. When we rerun the execution, the execution will pause at the breakpoint. Instead of console.log(something) and reloading pages, pause and inspect the code. It’s a more productive way to debug. When everything appears in order, click the resume button on the page to proceed with the execution. DevTools allows you to add a variety of breakpoints. The following image summarizes all the available breakpoint types.

Create/Save/Run Snippets

Utilizing snippets is an additional effective method for debugging. Using snippets, you may quickly run and reuse scripts in any area of your app.

To add a snippet:

Select Snippets in the left panel.
Click *New Snippet * in the left panel and write your code in the middle panel.
Save your snippet with keyboard commands (CTRL+C on Windows).
To run this code, right-click on the snippet and select Run.

DevTools Call Stack

You can also use DevTools to view the call stack. This is helpful when you’re troubleshooting errors and you need to keep track of changes to the call stack due to many asynchronous methods. Expand the Call Stack panel in the right panel to examine all the current functions in the call stack. This is available in the Sources tab of the DevTools.

Changes to Variables

Suppose you have a bug that does not return the correct value for a variable, and you want to check its value at a specific point in a function:

Add a breakpoint.
Navigate to the appropriate panel.
Expand the Scope to see the value of the variable.

You can see that this panel contains a lot of helpful information for troubleshooting bugs.

You can edit the variables by double-clicking them to test the function with different values.

Blackboxing

At times, you might need to prevent some scripts from running while debugging. You can black box them in DevTools rather than commenting them out in your code. Click on the script file you want to ignore in the Sources tab’s left panel. To add a script to the ignore list, right-click the code in the middle panel and choose Add script to ignore list.

Since the DevTools won’t execute this script, you can concentrate more on studying the flawed code and identifying the bug.

Benefits of Having a Debugger Tool

DevTools in Google Chrome is a terrific resource for debugging, enhancing network speed, viewing your site in various screen sizes and resolutions, and learning where you can improve the code. Even if Google Chrome is not your regular browser, installing it is highly recommended so you can use these features.

Saves time: The debugger helps enhance the speed of software development by providing many tools to keep track of the code and ensure the application’s behavior.

Reports errors: As soon as an error occurs, the debugger tool reports it. This makes the software development process less stressful and enables the early detection of errors.

Straightforward interpretations: By providing more details on data structures, the debugger tools enable simple interpretations.

Bug-free software: It assists developers in discovering software bugs so that they can be repaired before the software’s release.

Wrap Up

In this article, we went through the different techniques of debugging JavaScript code and the tools used in VS Code and Google Chrome.

VS Code’s debugging tools and Chrome’s DevTools offer significant functionality for debugging JavaScript. You’ll become a more effective debugger once you’ve mastered these tools and your days of unending console.log() will be over.

Thanks for reading. I hope this article helped with the critical concepts of debugging JavaScript.

Syncfusion’s Essential JS 2 is the only suite you will need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a free trial to evaluate it today.

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Syncfusion Mobile and Desktop Controls are Now Compatible with .NET 7

Rajeshwari Pandinagarajan — Wed, 09 Nov 2022 11:00:13 +0000

We have released a service pack for our 2022 Volume 3 release of Essential Studio. We are excited to announce that with this service pack release, our mobile and desktop controls for .NET MAUI, WPF, WinUI, and WinForms are now compatible with .NET 7.0.

Our .NET MAUI components are compatible with the following development environments:

Microsoft Visual Studio 2022 17.4.0 Preview 6.0 (.NET MAUI version 6.0.541) with .NET 7.0.
Microsoft Visual Studio 2022 17.4.0 Preview 6.0 (.NET MAUI version 6.0.541) with .NET 6.0.
Microsoft Visual Studio 2022 17.4.0 (.NET MAUI version 6.0.541) with .NET 6.0.
Visual Studio 2022 for Mac 17.4 Preview with .NET 6.0.

You can create projects targeting .NET 7.0 and reference our service pack NuGet packages either from nuget.org, or you can use the installer available from the Syncfusion website. Depending on your license, you can download the licensed installer or try our trial installer.

As you may know, Syncfusion is sponsoring the upcoming .NET Conf 2022, a free virtual event on November 8–10. The focus of this virtual event is the launch of .NET 7, including updates for .NET MAUI.

.NET MAUI is new, and it has all the right tool sets for building enterprise-quality applications. The top priority for this release of .NET MAUI is increasing the overall quality and reliability of the toolkit.

Referencing the blog announcing .NET 7 RC1, we encourage you to try the listed features using our controls in .NET 7.0 and let us know how it goes.

If you have any questions or comments, you can reach us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Introducing the New Angular Mention Component

Rajeshwari Pandinagarajan — Tue, 08 Nov 2022 11:00:03 +0000

We are happy to introduce the new Angular Mention component in our 2022 Volume 3 release. It provides one of the most anticipated features for all our editor components.

Let’s explore the Angular Mention component, its UI design, and its features with code examples.

Overview

The new Angular Mention component provides @mention and #hashtag functionality for any editor control. It lets users tag or select a user or group name from a suggestion list. It has several out-of-the-box features such as data binding, grouping, UI customization, accessibility, and more.

Key features

The following are the key features of the Angular Mention component:

Data binding.
Mention character customization.
Highlighting for matched text.
Icons paired with suggestion list items.
Categorizable suggestion lists.
Sortable suggestion lists.
UI customization with templates.
Web accessibility and keyboard support.

Data binding

The Angular Mention component supports different types of data sources, such as arrays of primitive data, JSON data collections, and remote data sources using adapters such as OData, OData V4, URLs, JSON, and web APIs.

The following code example shows how to bind a string of array data.

[app.component.ts]

import { Component } from ‘@angular/core’;

@Component({
 selector: ‘app-root’,
 // Specifies the template string for the Mention component.
 Template: `<div id=”commentBox” placeholder=”Type @ and tag user” ></div><ejs-mention [dataSource]=’userData’ [target]=’commentTarget’></ejs-mention>`
})
export class AppComponent {
 constructor() {
 }
 // Defines the array of data.
 Public userData: string[] = [‘Selma Rose’, ‘Russo Kay’, ‘Camden Kate’, ‘Garth’, ‘Margaret’, ‘Robert’, ‘Albert’, ‘Michael’];
 // Sets target editor or editable element.
 Public commentTarget: string = ‘#commentBox’;
}

Customize mention character

You can easily customize the mentioned character using the mentionChar property. Then, you can show or hide the mentioned character while tagging or selecting items by using the showMentionChar property. You can also use multiple mention characters that correspond to different suggestion lists within a single editor.

Customizing the Mention Character in the Angular Mention Component

Note: For more details, refer to our multiple suggestion list example for the Angular Mention component.

Highlight the matched text

The Angular Mention component has the option to configure different visual appearances for the matching text of each suggestion through the highlight property.

Highlighting the Matched Text in the Angular Mention Component

Suggestion list items with icons

The Angular Mention component comes with built-in icon support for visual representations of the suggestion items. To enable this feature, configure the CSS class name through the data source and map the fields.iconCss property for each item.

Angular Mention Component Showing the Suggestion List Items with Icons

Categorize the suggestions list items

You can organize suggestions into groups based on different categories. The category for each list item can be mapped through the groupBy field in the data source.

Categorizing the Suggestion List Items in the Angular Mention Component

Sorting the suggestions list items

The Angular Mention component has built-in support to display the suggestion list items in ascending or descending order using the sortOrder property.

UI customization with templates

To create custom user experiences, use the template option in the Angular Mention component. You can customize the suggestion list items, selection display text, no-record display, and data loading spinner using the template support.

Customizing the Angular Mention Component UI with Templates

Note: For more details, refer to the example for the Angular Mention component template.

Web accessibility and keyboard support

The Angular Mention component supports keyboard interaction and web accessibility standards based on the WAI-ARIA specifications, roles, and states. The supported keyboard shortcuts are as follows:

Down arrow : After the pop-up list opens, press the Down arrow key to move to the next list item. If it is the last item, then the selection will focus on the first item in the list.
Up arrow : After the pop-up list opens, press the Up arrow key to move to the previous list item. If it is the first item, then the selection will focus on the last item in the list.
Home/Page up: Moves to the first item in the list after the pop-up list opens.
End/Page down : Moves to the last item in the list after the pop-up list opens.
Esc : Closes the pop-up list if it is in the open state.
Enter : Selects the focused item, and when the pop-up list is in an open state it closes.
Tab : Focuses on the next TabIndex element on the page when the pop-up list is closed. Otherwise, inserts the selected pop-up list item and close the pop-up list.

How to use it

You can include the Mention component in the rich text editor, text area, text box, or other editable components. It has a huge set of resources for developers, including source code on GitHub, live demos, and thoroughly explained customization features in its documentation.

Supported platforms

The Mention component is also available on the following platforms.

Platform	Live demos	Documentation
React	React Mention demos	Getting started with React Mention
Vue	Vue Mention demos	Getting started with Vue Mention
JavaScript	JavaScript Mention demos	Getting started with JavaScript Mention
ASP.NET Core	ASP.NET Core Mention demos	Getting started with ASP.NET Core Mention
ASP.NET MVC	ASP.NET MVC Mention demos	Getting started with ASP.NET MVC Mention

Conclusion

Thanks for reading! In this blog, we have seen the features of the new Angular Mention component that rolled out in our 2022 Volume 3 release. These features are also listed on our Release Notes and the What’s New pages. Try out the component and share your feedback as comments on this blog.

You can also reach us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Handling CSV Files in ASP.NET Core Web APIs

Rajeshwari Pandinagarajan — Wed, 02 Nov 2022 10:40:14 +0000

Handling CSV files can be essential for developers in applications using ASP.NET Core Web APIs. There are many approaches to handling CSV, and CSVHelper is a handy NuGet package for doing so easily. This article will discuss how to handle CSV files using the CSVHelper library in an ASP.NET Core Web API.

Prerequisites

Before creating the application, you need to have the following tools installed:

What is CSVHelper?

CSVHelper is an open-source .NET library for reading and writing CSV files. It is speedy, flexible, and easy to use. We can read and write CSV files using the model class. Also, some configurations can map the model class with the headers of the CSV files, if required.

Creating the ASP.NET Core Web API application

First, create an ASP.NET Core Web API project using Visual Studio 2022. To do so, open Visual Studio and select a new project with an ASP.NET Core Web API template, as in the following figure.

Now, select the .NET 6 framework for this project, like in the next figure. Then, create the project and run it to check if everything is working.

Installing the CSVHelper package

Then, to install the CSVHelper package in our project, click right on the project and select the Manage NuGet Packages… option, as shown in the figure.

Then, navigate to the Browse tab in the NuGet section, search for the CSVHelper version 28.0.1 package, and install it, like in the following figure.

Now, create a model class named Employee. This class is used to read and write CSV files.

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public string City { get; set; }
    public string JobPosition { get; set; }
}

Note: We have created the Employee model class only for demonstration purposes. You can use any model class you need for your project.

Reading CSV files using CSVHelper

Now, we create a service to read CSV files using the CSVHelper NuGet package. For this, create a folder named Services in the root directory. Then, create an interface named ICSVService , similar to the next sample.

public interface ICSVService
{
   public IEnumerable<T> ReadCSV<T>(Stream file);
}

Create a class named CSVService, inherited from ICSVService.

public class CSVService : ICSVService
{
    public IEnumerable<T> ReadCSV<T>(Stream file)
    {
        var reader = new StreamReader(file);
        var csv = new CsvReader(reader, CultureInfo.InvariantCulture);

        var records = csv.GetRecords<T>();
        return records;
    }
}

We have used a method-level generic to deal with the model class. We can use this method with any model class to read CSV files. We have also passed the file stream as a parameter to the ReadCSV method. The StreamReader reads the text and characters from the file stream. Later, we used CsvReader to transfer the content read from StreamReader into the memory. Then, the GetRecords method returned the data of CSV files. We don’t need any configurations if our class property names match the headers of CSV files.

After all this, register the CSV service in the Program.cs, as shown in the next code.

builder.Services.AddScoped<ICSVService, CSVService>();

Next, create a controller class named EmployeeController inside the Controllers folder. Then, create the HttpPost request to read the CSV file using the ICSVService.

[ApiController]
[Route("[controller]")]
public class EmployeeController : Controller
{
   private readonly ICSVService _csvService;

   public EmployeeController(ICSVService csvService)
   {
       _csvService = csvService;
   }

   [HttpPost("read-employees-csv")]
   public async Task<IActionResult> GetEmployeeCSV([FromForm] IFormFileCollection file)
    {
        var employees = _csvService.ReadCSV<Employee>(file[0].OpenReadStream());

        return Ok(employees);
    }
}

We injected the ICSVService to use the read operation for CSV files. Also, EmployeeController uses the ApiController attribute to implement the Web API controller in ASP.NET Core. Then, we used the ReadCSV method of the CSVService to get the data of the CSV file after reading it.

First, let’s run the application. The following is the screenshot of the CSV file we use to read the data.

Then, run the read-employees-csv endpoint to read the CSV file like in the following figure.

Here we have attached the CSV file we use to run the read.

We received a response after running the API successfully.

Writing CSV files using CSVHelper

We use CSVService to create a CSV write method using the CSVHelper. For this, add an abstract method named WriteCSV in the ICSVService interface.

public interface ICSVService
{
    public IEnumerable<T> ReadCSV<T>(Stream file);
    void WriteCSV<T>(List<T> records);
}

After that, implement the WriteCSV method in the CSVService class like in the following code.

public class CSVService : ICSVService
{
    public IEnumerable<T> ReadCSV<T>(Stream file)
    {
        var reader = new StreamReader(file);
        var csv = new CsvReader(reader, CultureInfo.InvariantCulture);

        var records = csv.GetRecords<T>();
        return records;
    }

    public void WriteCSV<T>(List<T> records)
    {
        using (var writer = new StreamWriter("D:\\file.csv"))
        using (var csv = new CsvWriter(writer, CultureInfo.InvariantCulture))
        {
            csv.WriteRecords(records);
        }
    }
}

In the WriteCSV method, the StreamWriter is used to create and write files in the path specified in the parameter. The CsvWriter is used to create the actual CSV files using the StreamWriter instance created. The WriteRecords method writes all the data into the files.

Now, use EmployeeController to create a HttpPost request to create and write the CSV file.

[ApiController]
[Route("[controller]")]
public class EmployeeController : Controller
{
    private readonly ICSVService _csvService;

    public EmployeeController(ICSVService csvService)
    {
        _csvService = csvService;
    }

    [HttpPost("write-employee-csv")]
    public async Task<IActionResult> WriteEmployeeCSV([FromBody] List<Employee> employees)
    {
        _csvService.WriteCSV<Employee>(employees);

        return Ok();
    }

    [HttpPost("read-employees-csv")]
    public async Task<IActionResult> GetEmployeeCSV([FromForm] IFormFileCollection file)
    {
        var employees = _csvService.ReadCSV<Employee>(file[0].OpenReadStream());

        return Ok(employees);
    }
}

We implemented the new HttpPost request to write the CSV files using the WriteCSV method of CSVService.

Let’s run the Web API application. Then, we run the write-employee-csv endpoint to test the service.

We used Swagger to run and test the API to write the CSV. We passed a list with two employee objects.

And so, we have successfully created a CSV file in the directory path. The employee data is in the CSV file, like in the next figure.

Conclusion

This article discussed handling CSV files using the CSVHelper package with an ASP. NET Core Web API application. This included performing read and write operations in the CSV file using the CSVHelper package.

I hope this article will help you handle your next project’s CSV files. Thank you for reading.

If you’re already a Syncfusion user, you can download the product setup. If not, you can download a free 30-day trial to evaluate our products.

You can contact us through our support forum, support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

How to Integrate Syncfusion React Mention Component with Rich Text Editor

Rajeshwari Pandinagarajan — Tue, 01 Nov 2022 11:24:24 +0000

The Syncfusion React Rich Text Editor (RTE) is a feature-rich WYSIWYG HTML editor. It is widely used to create blogs, forum posts, notes, support tickets (incidents), comment sections, messaging applications, and more. The control provides an efficient UI for a better editing experience on mobile devices. It has a variety of tools to edit and format rich content and return valid HTML markup or Markdown (MD) content. It allows users to insert images, links, tables, and lists with modular architectures.

From 2022 Volume 3 onward, the React Rich Text Editor allows users to easily integrate our new React Mention component to display a suggestion list of items that users can select or tag. When the user types the @ character in the editor, the suggestion list will appear, and the user can select or tag a value from it.

In this blog, we will see the procedure to integrate the React Mention component with the Rich Text Editor.

Getting started

Before getting started, please refer to the documentation for the Syncfusion React Rich Text Editor and Mention components to familiarize yourself with them.

Then, follow these steps to integrate the React Mention component with the Rich Text Editor.

Step 1: Create a new React application.

First, install the create-react-app npm package using the following command in the desired location.

npx create-react-app my-app

Then, refer to the Getting Started with React Apps documentation to create a React app using the npm and yarn commands.

Step 2: Add the Syncfusion packages.

The npm public registry lists all the currently available Essential JS 2 packages. Install the React Rich Text Editor and Mention components with the following commands.

npm install @syncfusion/ej2-react-richtexteditor –save-dev
npm install @syncfusion/ej2-react-dropdowns –save-dev

Step 3: Add the CSS reference for the Syncfusion React Rich Text Editor and Mention components.

Now, add the following CSS files as references for the Syncfusion React Rich Text Editor and Mention components in the src/App.css file. These files are available in the ../node_modules/@syncfusion package folder.

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap5.css';
@import '../node_modules/@syncfusion/ej2-react-richtexteditor/styles/bootstrap5.css';
@import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/bootstrap5.css";

Step 4: Add the Syncfusion React Rich Text Editor to your application.

Now, place the following code in the src/App.js file to add the Syncfusion React Rich Text Editor component.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import './App.css';

function App() {

 var actionBegineHandler = function(args){
  if (args.requestType === 'EnterAction') {
    args.cancel = true;
  }
 }
 return (
 <div className="App">
  <div className='control-section' id="rte">
   <div className='rte-control-section'>
    <RichTextEditorComponent id="mention_integration" placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)} >
     <p>Hello <span contentEditable={false} className='e-mention-chip'><a title="maria@gmail.com">@Maria</a></span></p>
     <p>Welcome to the mention integration with rich text editor demo. Type the <code>@</code> character and tag a user from the suggestion list. </p>
     <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
    </RichTextEditorComponent>
   </div>
  </div>
 </div>
 );
}

export default App;

Step 5: Integrate the React Mention component with the Rich Text Editor.

1.Add the React Mention component in the src/App.js file and set the Rich Text Editor’s editable element ( “** #{RichTextEditor component ID}_integration_rte-edit-view”)** to the Mention component’s target.
2.Now, place the following code in the src/App.js file to integrate the Mention component with the Rich Text Editor. We are going to bind an employee data source to the Mention component. We use the itemTemplate property to customize the suggestion list items and the displayTemplate property to customize the selected value from the suggestion list.

import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import './App.css';

function App() {
 var data = [
  { Name: "Selma Rose", Status: "active", Eimg: "2", EmailId: "selma@gmail.com" },
  { Name: "Maria", Status: "active", Eimg: "1", EmailId: "maria@gmail.com" },
  { Name: "Russo Kay", Status: "busy", Eimg: "8", EmailId: "russo@gmail.com" },
  { Name: "Camden Kate", Status: "active", Eimg: "9", EmailId: "camden@gmail.com" },
  { Name: "Robert", Status: "busy", Eimg: "dp", EmailId: "robert@gmail.com" },
  { Name: "Garth", Status: "active", Eimg: "7", EmailId: "garth@gmail.com" },
  { Name: "Andrew James", Status: "away", Eimg: "pic04", EmailId: "noah@gmail.com" },
  { Name: "Olivia", Status: "busy", Eimg: "5", EmailId: "olivia@gmail.com" },
  { Name: "Sophia", Status: "away", Eimg: "6", EmailId: "sophia@gmail.com" },
  { Name: "Margaret", Status: "active", Eimg: "3", EmailId: "margaret@gmail.com" },
  { Name: "Ursula Ann", Status: "active", Eimg: "dp", EmailId: "ursula@gmail.com" },
  { Name: "Laura Grace", Status: "away", Eimg: "4", EmailId: "laura@gmail.com" },
  { Name: "Albert", Status: "active", Eimg: "pic03", EmailId: "albert@gmail.com" },
  { Name: "William", Status: "away", Eimg: "10", EmailId: "william@gmail.com" }
 ];
 var fieldsData = { text: 'Name' };

 var itemTemplate = function(data) {
  return (
   <table>
    <tbody>
     <tr>
      <td>
       <div id="mention-TemplateList">
        <img className="mentionEmpImage" src={"./images/" + data.Eimg +".png"} />
        <span className={"e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"+ data.Status}></span>
       </div>
      </td>
      <td className="mentionNameList">
       <span className="person">{data.Name}</span>
       <span className="email">{data.EmailId}</span>
      </td>
     </tr>
    </tbody>
   </table>
  );
 }
 var displayTemplate= function(data) {
  return (
   <React.Fragment><a title={data.EmailId}>@{data.Name}</a></React.Fragment>
  );
 }
 var actionBegineHandler = function(args){
  if (args.requestType === 'EnterAction') {
   args.cancel = true;
  }
}
return (
 <div className="App">
  <div className='control-section' id="rte">
   <div className='rte-control-section'>
    <RichTextEditorComponent id="mention_integration" placeholder="Type @ and tag the name" actionBegin={actionBegineHandler.bind(this)} >
     <p>Hello <span contentEditable={false} className='e-mention-chip'><a title="maria@gmail.com">@Maria</a></span></p>
     <p>Welcome to the mention integration with rich text editor demo. Type the <code>@</code> character and tag a user from the suggestion list. </p>
     <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
    </RichTextEditorComponent>
   </div>
  </div>
  <MentionComponent id="mentionEditor" target="#mention_integration_rte-edit-view" suggestionCount={8} showMentionChar={false} allowSpaces={true} dataSource={data} fields={fieldsData}
                    popupWidth="250px" popupHeight="200px" itemTemplate={itemTemplate} displayTemplate={displayTemplate.bind(this)}></MentionComponent>
 </div>
);
}

export default App;

3.Then, add the following styles in the src/App.css file to customize the Mention suggestion list items and select a value from the suggestion list.

#mention-TemplateList {
  position: relative;
  display: inline-block;
  padding: 2px;
}
.mentionNameList .person, .mentionNameList .email {
  display: block;
  line-height: 20px;
  text-indent: 5px;
}
.mentionNameList .person {
  font-size: 16px;
}
.mentionEmpImage {
  display: inline-block;
  width: 46px;
  height: 46px;
  padding: 3px;
  border-radius: 25px;
}
#mention-TemplateList .e-badge-success {
  left: 76%;
  bottom: 6px;
  top: auto;
}
#mention_integration_rte-edit-view_popup .e-dropdownbase .e-list-item {
  line-height: 8px;
}
#mention-TemplateList .e-badge-success {
  background-color: #4d841d;
  color: #fff;
}
#mention-TemplateList .e-badge-success.away {
  background-color: #fedd2d;
  color: #fff;
}
#mention-TemplateList .e-badge-success.busy {
  background-color: #de1a1a;
  color: #fff;
}
#mention-TemplateList .e-badge.e-badge-dot {
  height: 10px;
  width: 10px;
}
#mention_integration .e-mention-chip {
  cursor: pointer;
}

After executing the above code example, we will get output like the following GIF image.

React Mention Component Integration with Rich Text Editor Control

GitHub reference

For more details, check out the React Mention component integration with React Rich Text Editor component GitHub demo.

Conclusion

Thanks for reading! I hope now you have a clear idea of how to integrate the Syncfusion React Mention component with the Rich Text Editor. This support is available in the 2022 Volume 3 release. We look forward to hearing your thoughts on this integration in the comments section below.

Check out our Release Notes and What’s New pages to see the other updates in this Volume 3 release.

Also, you can reach us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

What Is Webpack Module Federation and Why Does It Matter?

Rajeshwari Pandinagarajan — Tue, 01 Nov 2022 10:30:40 +0000

Module Federation is one of the most exciting features in Webpack 5 and is considered a game-changer in JavaScript architecture. It supports more independent and straightforward code sharing at runtime among JavaScript applications, making the applications more adaptive and dynamic.

This article will go through what Webpack Module Federation is, how and why it is used, and the benefits you can reap by using it.

What Is Module Federation?

Webpack Module Federation makes sharing code and dependencies between different code bases easier. This architecture loads the code dynamically at runtime to reduce the frequency of code duplication, and the host application only downloads the missing dependencies, if any.

Zack Jackson, a Webpack maintainer, invented Module Federation, which became a flagship feature of Webpack 5 in 2020. It is not a framework but a plugin that provides flexibility in building your project. Even though Module Federation was initially for the asynchronous loading of JavaScript bundles, later on, it expanded to aid with server-side rendering.

Why Is Webpack Module Federation Important?

Webpack Module Federation is a powerful feature revolutionizing JavaScript architecture and the micro-frontend approach. It can provide many benefits to your application system if appropriately utilized.

Before the introduction of Module Federation, code sharing tended not to be a smooth process. Micro-frontend implementation was also getting more complex.

Module Federation is an architecture that addresses these issues and revolutionized the micro-frontend strategy. With Module Federation, an application runs code dynamically from another bundle or build with its code-sharing and functionality-consuming abilities during runtime, paving the path to the successful utilization of micro-frontend technology. In addition, the use of sharable dependencies improves the compactness of the application. Module Federation gives a sense of familiarity to developers, too, as it is a part of the Webpack ecosystem the developers may have already used.

All these criteria make Webpack Module Federation a powerful and essential feature you must consider using in future projects.

Module Federation: Terminology

Following are some important terms you may need to familiarize yourself with when using Webpack Module Federation:

Host : The Webpack build initialized first during a page build is the host. The host application contains typical features from a SPA or SSR application that boots and renders the components the user would see first.
Remote : Remote is another Webpack build from which the host can consume a part. It can strictly be either a remote or a host. The major functionality of a remote is to expose modules to be consumed.

plugins: [
  new container.ModuleFederationPlugin({
   remotes: {
        app_two: 'app_two',
        }
  })
]

Bidirectional host : Bidirectional hosts can consume other applications or be consumed. So, this Webpack build or bundle can act as either a remote or a host at runtime.
Vendor Federation : Vendor Federation is an important feature that aids in solving a significant performance issue in micro-frontend architecture. Regardless of where the modules are loaded from, it enables all or part of a remote or host’s npm modules to share at runtime declaratively.

Configuration Options

A build can both consume modules from other builds and provide modules to other builds at runtime, thanks to the ModuleFederationPlugin. You need to be familiar with several key configuration options, as Module Federation is configuration-based:

library : The library contains a name (name of the library) and type options. It helps decide how the exposed code is retrieved and stored.
name : The name configuration option uniquely identifies the exposed container.

plugins: [
    new container.ModuleFederationPlugin({
      name: 'she1',
    })
  ]
};

filename : This determines the filename of the output bundle in Module Federation.

plugins: [
  new container.ModuleFederationPlugin({
    filename: 'she1/remoteShop.js'
  })
]

exposes : Through Module Federation, you can also share file types in addition to the modules. This configuration option depicts the path to the files or modules exposed by the container.
shared : This is an essential configuration option, allowing you to share libraries on which the exposed module depends to run.

In addition to the previous configuration options, there are several more that you may come across, like singleton, strictVersion, and eager.

How Does Module Federation Work?

The ModuleFederationPlugin facilitates applications exposing and consuming modules to enable the Module Federation implementation.

Following is a sample code block showing an application that exposes its AppContainer and hosts react and react-dom. Because of the shared modules, the remotes will only download the required application code and none from the shared modules.

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

new ModuleFederationPlugin({
    name: 'appli_one',
    library: { type: 'global', name: 'appli_a' },
    remotes: {
      app_three: 'app_three',
      app_two: 'app_two'
    },
    exposes: {
       AppContainer: './src/App'
    },
    shared: ['react', 'react-dom']
}),

You can find more information and examples for implementing Module Federation with React, Vue, and Angular here.

Benefits of Webpack Module Federation

Using the shared option minimizes dependency duplication , as the remotes depend on the host’s dependencies. If the host lacks a dependency, the remote downloads its dependency only when necessary.
Server-side rendering is possible , as Module Federation can work in any environment.
Enhances build performance , as Module Federation supports the micro-frontend approach, allowing different teams to work simultaneously on a larger application by building and deploying independent, split projects.
Module Federation supports lazy loading bundles to load modules only when necessary, resulting in better web performance.
Module Federation manages a dependency graph for shared dependencies. It helps download necessary dependencies even when there is an issue like a network failure.
Improves both user experience and developer experience.

Conclusion

Webpack Module Federation is a feature that enables loading separately compiled applications at runtime and allows sharing of common dependencies. With its wide array of benefits and runtime integration ability, Module Federation is a great feature for micro-frontends and plugin systems.

It is a highly beneficial solution to consider in your project, especially with its scalability in sharing code among independent applications, which is bound to improve the overall performance.

I hope this article helped you understand Webpack Module Federation and how to utilize it effectively in your project.

Thank you for reading!

Syncfusion’s Essential JS 2 is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a free trial to evaluate the controls today.

If you have any questions or comments, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Introducing Skeleton Loading Indicator in Syncfusion Essential JS 2 DataGrid

Rajeshwari Pandinagarajan — Mon, 31 Oct 2022 12:19:27 +0000

In modern UI design, most of us expect to show visual effects until the control is ready for user interaction. A skeleton effect shows a loading indicator in the shape of the content to be loaded in a control. In a grid, a skeleton effect would display rows and columns without any data.

From the 2022 Volume 3 release onward, Syncfusion’s Essential JS 2 DataGrid supports a skeleton loading indicator (shimmer effect) between fetching data from the server (or another service) and binding it to the grid during initial rendering, while refreshing, or after performing any grid actions like sorting, filtering, or grouping.

In this blog, we will see how to visualize the skeleton loading indicator for various features in our Essential JS 2 DataGrid.

Enable skeleton loading indicator in Syncfusion Essential JS 2 DataGrid

Syncfusion DataGrid supports both spinner and shimmer effects as loading indicators. In modern design, the shimmer effect is preferred over a spinner.

Both paginated and virtualization-enabled grids are used to visualize a huge volume of data without any performance degradation. Let’s see how to enable the shimmer effect for both paginated and virtualized grids in our Essential JS 2 DataGrid.

For paginated DataGrid

In a pagination-enabled DataGrid, we can enable the shimmer effect by setting the loadingIndicator property as Shimmer. The default value of loadingIndicator is Spinner. So, we have to define this property to use the shimmer effect.

This doesn’t mean that the shimmer effect will be shown for pagination alone. It can also be shown while performing other grid actions. The skeleton loading indicator will be shown to represent the grid content layout whenever the grid is waiting for content.

Refer to the following code example.

import { Grid, Page, Selection } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source

Grid.Inject(Page);

let grid: Grid = new Grid(
{
  dataSource: orderData,
  allowPaging: true,
  loadingIndicator: { indicatorType: 'Shimmer' },
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },
  ],
  pageSettings: { pageSize: 7 }
});
grid.appendTo('#Grid');

Skeleton Loading Indicator with Shimmer Effect in Paginated DataGrid

For virtualization-enabled DataGrid

In a virtualization-enabled DataGrid, instead of loading all the data, the data will load on demand while the user scrolls the DataGrid with the vertical scroll bar.

Syncfusion Essential JS 2 DataGrid allows you to show the skeleton shimmer effect while loading data on demand, and you can enable this feature by setting the enableVirtualMaskRow property value as true.

Refer to the following code example.

import { VirtualScroll, Grid, Edit, Toolbar } from '@syncfusion/ej2-grids';
import { orderData } from './data-source'; // import your data source

Grid.Inject(VirtualScroll);

let grid: Grid = new Grid(
{
  dataSource: orderData,
  enableVirtualization: true,
  height: 400,
  enableVirtualMaskRow:true,
  columns: [
    { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
    { field: 'CustomerID', headerText: 'Customer ID', width: 150 },
    { field: 'ShipCity', headerText: 'Ship City', width: 150 },

  ],
});
grid.appendTo('#Grid');

Skeleton Loading Indicator Support for Virtualization-Enabled DataGrid

Other DataGrid features with skeleton loading indicator

Let’s see the shimmer effect in other features of the Essential JS 2 DataGrid.

Single column grouping

Multiple column grouping

Group caption aggregate

Footer aggregate

Hierarchical DataGrid

Checkbox column

Checkbox filtering

References

For more details, refer to our Syncfusion Essential JS 2 DataGrid documentation and demos.

Conclusion

Thanks for reading! We hope you enjoyed this quick introduction to the skeleton loading indicator (shimmer effect) in our Essential JS 2 DataGrid in the 2022 Volume 3 release. Try out this great feature and provide your feedback in the comments section below.

Also, check out our Release Notes and What’s New pages to see all the new updates in this release.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Top 7 Features of Angular 14

Rajeshwari Pandinagarajan — Thu, 27 Oct 2022 11:11:08 +0000

Angular 14 was one of the most anticipated updates to the enormously popular platform. It was released in June 2022, and many important and useful features were included. This article explains the top seven features of Angular 14 that every developer should know.

Let’s walk through these features one by one.

1. Standalone components, directives, and pipes

In Angular 14, you can create a module-less Angular application using the standalone flag. Right now, this feature is in the developer preview state.

In Angular 13 and older, the NgModule contained component configurations like imports, declarations, pipes, and directives, so there was a need to add NgModule as a separate file. However, in Angular 14, you can create standalone components without NgModule.

To enable creating a standalone component, you must add the standalone flag (standalone: true) inside the @component decorator and add all the configurations inside the decorator. The root component should be passed as an argument to the bootstrapApplication function provided by @angular/platform-browsers.

Refer to the following code example to create a standalone component.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [
        // import standalone Components, Directives, and Pipes
        CommonModule // and NgModules
    ],
    template: `
        <div>{{name}}</div>
})
export class SampleComponent {
    name = "Angular 14";
}
// Bootstrap a new Angular application using our `SampleComponent` as a root component.
bootstrapApplication(SampleComponent);

2. Typed Angular forms

Typed forms ensure that the values inside form controls, groups, and arrays are type-safe across the entire API surface. This enables safer forms, especially for deeply nested complex cases. The schematic ng update provides backward compatibility for your existing forms. Syncfusion’s Angular Forms components are compatible with the typed Angular forms functionality.

Refer to the following code to create typed Angular forms.

export class SampleComponent {
    var contactForm = new FormGroup({
     name: new FormControl<string>('', { nonNullable: true }),
     email: new FormControl<string>('', { nonNullable: true }),
     contactNumber: new FormControl<number>(0, { nonNullable: false })
    });
}

3. Streamlined page title accessibility

In Angular 14, we can add the router title without any additional import on the page. Refer to the following code example.

const routes: Routes = [{
    path: 'home',
    component: HomeComponent
    title: 'Home page' // <-- Page title
}, {
    path: 'about',
    component: AboutComponent,
    title: 'About page' // <-- Page title
}];

4. Extended developer diagnostics

The extendable developer diagnostics feature provides extendable frameworks that help developers better understand the templates and display suggestions for potential enhancements. It helps improve caching before runtime, provide actionable suggestions for a template, and helps diagnose warnings at compile time.

5. More built-in improvements

Angular 14 also includes support for the latest TypeScript 4.7 release and now targets ES2020 by default, which allows the CLI to ship smaller code without paring down features.

6. Bind to protected component members

Now you can bind protected component members directly from the template. Refer to the following code example.

@Component({
    selector: 'app-root',
    template: '{{ title }}', // Now compiles!
})
export class SampleComponent {
    protected title: string = 'Angular 14';
}

This feature provides more control over the public API surface of your reusable components.

7. Optional injectors in embedded Views

Angular 14 supports passing in an optional injector when creating an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView. This injector enables customization of dependency injection behavior within the specific template.

Refer to the following code.

viewContainer.createEmbeddedView(templateRef, context, {
    injector: injector,
})

How to upgrade to Angular 14

If you are using Angular 13, run the command ng update @angular/core@14 @angular/cli@14 to update all Angular dependencies to Angular 14. Also, Angular 14 requires some new prerequisites to build an application.

Angular 14 prerequisites

Typescript 4.7.
Node version 14.15.0 or later.

How to get started easily with Syncfusion Angular 14 components

Syncfusion Angular packages are distributed in npm as the @syncfusion scoped package. Since version 20.2.36, Syncfusion has provided support for Angular 14. This section will guide you in getting started with the Syncfusion Angular 14 Data Grid.

Installing the Data Grid component

Use the following command to install Data Grid packages from the NuGet package manager.

npm install @syncfusion/ej2-angular-charts –save

Registering GridModule

Register Syncfusion Angular Grid modules in the application, update the app.module.ts file as shown below, and import GridModule in the ngmodules.

Refer to the following code example.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the GridModule for the Grid component
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

@NgModule({
    //declaration of ej2-angular-grids module into NgModule
    imports: [BrowserModule, GridModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Adding CSS references

Refer to the following code to import the CSS files in the ../node_modules/@syncfusion package folder. This code should be added to [src/styles.css].

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';  
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

Add Data Grid component

Add the Data Grid component in the app.component.ts file. Refer to the following code examples.

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
            </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data: object[];

    ngOnInit(): void {
        this.data = [
            {
                OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
                ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
                ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
            },
            {
                OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
                ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
                ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
            },
            {
                OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
                ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
                ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
            }
        ];
    }
}

Run the application

Serve the application by using the ng serve command, and the output will render in the browser as shown below.

Conclusion

Angular 14 is available with an exciting new set of features to develop applications easier. This article explained the top seven features of Angular 14 and the procedure to create an Angular 14 application with the Syncfusion Data Grid.

Refer to the Angular Roadmap to learn the future plans for the platform.

Syncfusion’s Angular UI component library is the only suite you will ever need to build an app. It contains over 75 high-performance, lightweight, modular, and responsive UI components in a single package.

For existing customers, the newest Essential Studio version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features. Also, check out our demos on GitHub.

If you have questions, you can contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Thanks for reading this blog!

Related blogs

Introducing the New .NET MAUI ComboBox Control

Rajeshwari Pandinagarajan — Thu, 27 Oct 2022 11:00:11 +0000

A ComboBox is a crucial UI element that most mobile app developers use in their projects. We at Syncfusion understand the wide-ranging utility of this control and have now delivered a .NET MAUI ComboBox control in our 2022 Volume 3 release.

In this article, I will summarize the key features of the .NET MAUI ComboBox control and how to get started with it.

.NET MAUI ComboBox

The .NET MAUI ComboBox control is a selection component that allows users to type a value or choose an option from a list of predefined options. It has many features, such as data binding, editing, searching, a clear button, and dropdown button customization.

Getting started with .NET MAUI ComboBox

Let’s see how to get started with the .NET MAUI ComboBox control, populate it with data, and load items.

Step 1 : Syncfusion .NET MAUI components are available on the NuGet Gallery. To add the SfComboBox to your project, open the NuGet package manager in Visual Studio. Search for the Syncfusion.Maui.Inputs NuGet package and then install it.

Step 2 : Register the handler for the Syncfusion Core package in the MauiProgram.cs file.

using Syncfusion.Maui.Core.Hosting;
using Syncfusion.Maui.ListView.Hosting;
public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
     var builder = MauiApp.CreateBuilder();
     builder
       .UseMauiApp<App>()
       .ConfigureSyncfusionCore()
       .ConfigureSyncfusionListView()
       .ConfigureFonts(fonts =>
        {
           fonts.AddFont(“OpenSans - Regular.ttf”, “OpenSansRegular”);
           fonts.AddFont(“OpenSans - Semibold.ttf”, “OpenSansSemibold”);
        });

     return builder.Build();
  }
}

Step 3 : Import the SfComboBox namespace on the XAML page.

xmlns:inputs=”clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs”

Step 4 : Initialize an empty ComboBox control as shown in the following code.

<inputs:SfComboBox x:Name=“combobox” WidthRequest=”200″/>

Step 5 : Let’s create the data required to populate the suggestion list. This includes the creation of the example Person class and PersonsViewModel with a list of Person objects.

public class Person
{
  public string Name { get; set; }
  public string SecondName { get; set; }
}
public class PersonsViewModel : INotifyPropertyChanged
{
  readonly IList<Person> source;
  Person selectedPerson;
  private string selectedItem;
  public ObservableCollection<Person> Persons { get; private set; }
  public List<string> Items { get; private set; }
  public Person SelectedPerson
  {
    get
    {
      return selectedPerson;
    }
    set
    {
      if (selectedPerson != value)
      {
        selectedPerson = value;
        OnPropertyChanged(“SelectedPerson”);
      }
    }
  }

  public string SelectedItem
  {
    get
    {
      return selectedItem;
    }
    set
    {
      if (selectedItem != value)
      {
        selectedItem = value;
        OnPropertyChanged(“SelectedItem”);
      }
    }
  }

  public PersonsViewModel()
  {
    source = new List<Person>();
    CreatePersonCollection();

    SelectedPerson = Persons.Skip(3).FirstOrDefault();
  }

  void CreatePersonCollection()
  {
    for (int i = 0; i < 1; i++)
    {

      source.Add(new Person { Name = “Adam”, SecondName = “A” });
      source.Add(new Person { Name = “Bob”, SecondName = “A” });
      source.Add(new Person { Name = “John”, SecondName = “D” });
      source.Add(new Person { Name = “Alan”, SecondName = “E” });
      source.Add(new Person { Name = “Alex”, SecondName = “F” });
      source.Add(new Person { Name = “Jacob”, SecondName = “R” });
      source.Add(new Person { Name = “Peter”, SecondName = “J” });
      source.Add(new Person { Name = “Clark”, SecondName = “L” });
      source.Add(new Person { Name = “Ben”, SecondName = “A” });
      source.Add(new Person { Name = “Dave”, SecondName = “S” });
    }

    Persons = new ObservableCollection<Person>(source);
  }

  #region INotifyPropertyChanged
  public event PropertyChangedEventHandler PropertyChanged;

  void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
  #endregion
}

Step 6 : Set the binding context to the PersonsViewModel , bind the ItemsSource with the Persons list , and bind the DisplayMemberPath property with the Name property.

<ContentPage.BindingContext>
  <local:PersonsViewModel/>
</ContentPage.BindingContext>
<inputs:SfComboBox WidthRequest=”200″
                   ItemsSource=”{Binding Persons}”
                   DisplayMemberPath=”Name”/>

That’s it. Our .NET MAUI ComboBox control is now ready.

.NET MAUI ComboBox Control

Customization in .NET MAUI ComboBox

You can perform the following customizations in the .NET MAUI ComboBox control:

Placeholder text

You can prompt the user with any information using the PlaceholderText property. This text will be displayed only if no items are selected or the edit text field is empty. The default value of the PlaceholderText property is string.Empty (no string will be displayed).

Refer to the following code example.

<editors:SfComboBox x:Name="comboBox"
                      WidthRequest="250"
                      ItemsSource="{Binding SocialMedias}"
                      DisplayMemberPath="Name"
                      TextMemberPath="Name"
                      Placeholder="Select a social media" />

Customizing the Placeholder Text in .NET MAUI ComboBox

Color customization

You can also customize the color of the ComboBox border, placeholder text, item text, clear button, dropdown icon, and more.

Refer to the following code example where we have customized the border and dropdown icon color.

<editors:SfComboBox x:Name="combobox"
                      WidthRequest=”250”                    
                      ItemsSource="{Binding SocialMedias}"
                      DisplayMemberPath="Name"
                      TextMemberPath="Name"
                      DropDownIconColor="Red"
                      BorderColor="Red" />

Color Customization in .NET MAUI ComboBox

Upcoming features

This is the initial version of our.NET MAUI ComboBox control. You can expect the following features in our upcoming releases:

Multiselection with chip UI.
Diacritic sensitivity.
Item templates.
Text match highlights.
Dropdown header and footer.
Custom filtering.

Conclusion

Thanks for reading! In this blog, we have seen the vivid features of the new .NET MAUI ComboBox control available in our 2022 Volume 3 release. Check out our Release Notes and What’s New pages to see the other updates in this release.

You can also download our free evaluation to see all our .NET MAUI controls in action.

If you have any questions or comments, you can reach us through our support forum, support portal, or feedback portal. We are always happy to assist you!