Have you ever wanted to have a way of viewing a network and traverse through it in g graphical way?

Node Object Model (NOM) is perfect for presenting Network topology or representing data in the form of nodes of different sizes embedding node-specific data that can be retrieved through each node.

Live Demo | NPM | Comments/Requests

MODULE: 
		NodeObjectModule

DEPENDENCIES: 
    "font-awesome": "^4.7.0",

Node interface provides a basic block to create a topology of inter-connections. A node ID is essentially its name or title. A node is represented with an icon. The icon value will be a CSS class name that renders the icon. A node is also represented by a description which can be a long text/html content that can be displayed when a node is selected. A node can be a facade of a topology of inner nodes through its children. Within a node, all children could be inter connected through list of IDs in its connections list. A node could have any kind of information pertinent to its characteristics and as such is not pre-defined through its info object. Wnen representing a node in a container, top and left values will determine its physical pixel perfect location within the cntainer.

export interface Node {
	id: string;
	icon: string;
	draggable?: boolean;
	editable?: boolean;
	description: string;
	top: number;
	left: number;
	width: number;
	height: number;
	children: Node[];
	connections: Connection[];
	info?: any;
	offset?: any;
}
export interface Connection {
	id: string;
	class: string;
	info?: any;
}
export interface ConnectionDetail {
	id: string;
	offset: number;
	from: string;
	to: string;
	info: any;
	hit: (event: any, item: any) => boolean;
	left: number;
	top:  number;
	width:  number;
	height: number;
	class: string[]
}

<node-object-model 
    [root]="root"
    [clear]="root === undefined"
    [enableInspection]="enableInspection" 
    [enableDetailedInspection]="enableDetailedInspection"
    [popupInspection]="popupInspection"
    [activeOnHover]="activeOnHover"
    (onSelection)="report($event)"
    [editable]="editable" >
</node-object-model>  	

Version	Description
0.0.2/3/4/5	small documentational fixes.
0.0.1	Initial release with angular 15.

Sample of code in Action: