markgojs/projects/angular-basic/src/app/app.component.html

Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams

<!--The content below is only a placeholder and can be replaced.-->
<div>
  <h1 style="text-align:center">
    Welcome to {{title}}!
  </h1>
  <app-diagram-editor
   [model]="model"
   (nodeSelected)="showDetails($event)"
   (modelChanged)="onModelChanged($event)">
  </app-diagram-editor>
  <form *ngIf="node" #form="ngForm" (ngSubmit)="onCommitDetails()">
    Node Details:
    <div><label>Key: </label>{{node.key}}</div>
    <div><label>Text: </label><input [(ngModel)]="data.text" name="text"></div>
    <div><label>Color: </label><input [(ngModel)]="data.color" name="color"></div>
    <div><label>Location: </label>{{node.location.x.toFixed(2)}}, {{node.location.y.toFixed(2)}}</div>
    <div><label># Links: </label>{{node.linksConnected.count}}</div>
    <button type="submit">Commit Details</button>
    <button (click)="onCancelChanges()">Cancel Changes</button>
  </form>
</div>