Nearsighted Paramecium Multiverse

    @antv/x6-angular-shape
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    @antv/x6-angular-shape

    x6 shape for rendering angular component or templateRef

    Installation

    # npm
    $ npm install @antv/x6-angular-shape --save
    
    # yarn
    $ yarn add @antv/x6-angular-shape

    Usage

    Render component

    import { Component, Input } from '@angular/core';
    
    @Component({
      selector: 'app-node',
      template: `<div>{{ title }}</div>`
    })
    export class NodeComponent {
      @Input() title: string;
    }
    // other package from angular
    import '@antv/x6-angular-shape'
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      @ViewChild('demoTpl', { static: true }) demoTpl: TemplateRef<void>;
    
      addAngularComponent(): void {
        Graph.registerAngularContent('demo-component', { injector: this.injector, content: NodeComponent });
        this.graph.addNode({
          data: {
            // You can pass data to the component, only if you wrap attribute with ngArguments
            ngArguments: {
              // Declare @Input() in the component, then it will be assignmented
              title: 'Angular Component'
            }
          },
          x: 40,
          y: 40,
          width: 160,
          height: 30,
          shape: 'angular-shape',
          componentName: 'demo-component'
        });
      }
    }

    Render templateRef

    <ng-template #demoTpl let-data="ngArguments">
      <div>{{ data.title }}</div>
    </ng-template>
    // other package from angular
    import '@antv/x6-angular-shape'
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      @ViewChild('demoTpl', { static: true }) demoTpl: TemplateRef<void>;
    
      addAngularTemplate(): void {
        Graph.registerAngularContent('demo-template', { injector: this.injector, content: this.demoTpl });
        this.graph.addNode({
          data: {
            ngArguments: {
              title: 'Angular Template'
            }
          },
          x: 240,
          y: 40,
          width: 160,
          height: 30,
          shape: 'angular-shape',
          componentName: 'demo-template'
      }
    }

    Render by callback

    // other package from angular
    import '@antv/x6-angular-shape'
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      @ViewChild('demoTpl', { static: true }) demoTpl: TemplateRef<void>;
    
      addAngularWithCallback(): void {
        Graph.registerAngularContent('demo-template', (node) => {
          const data = node.getData();
          console.log(data);
          return { injector: this.injector, content: this.demoTpl };
        });
        this.graph.addNode({
          data: {
            ngArguments: {
              title: 'Angular Callback'
            }
          },
          x: 240,
          y: 40,
          width: 160,
          height: 30,
          shape: 'angular-shape',
          componentName: 'demo-template'
        });
      }
    }

    Install

    npm i @antv/x6-angular-shape

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    104 kB

    Total Files

    35

    Last publish

    Collaborators

    • iaaron
    • wjgogogo
    • yangzhanmei
    • jinke.li
    • susan_ann
    • yard
    • intchous
    • soundquiet
    • lviser
    • freestyle21
    • serializedowen
    • sturuby
    • xdzhao
    • elaine.q.10
    • sakuya223
    • leungwensen
    • dori
    • simaq
    • dxq613
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn