g6/packages/site/common/angular-snippet.md
Aaron 45750f7790
docs: add documentation (#5695)
* refactor(site): adjust script

* feat(site): add script that can sort docs in specific folder

* docs: remove apis folder

* docs: add getting-started for chinese version

* docs: add core-concept for chinese version

* docs: add upgrade for chinese version

* docs: remove quick-start

* refactor(site): add createGraph global utils

* docs: add extension in core concept
2024-05-06 10:52:18 +08:00

1.4 KiB

app.component.html

<div>
  <h1>{{ title }}</h1>
  <div #container></div>
</div>

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Graph } from '@antv/g6';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Use G6 in Angular';

  @ViewChild('container') container: ElementRef;

  ngAfterViewInit() {
    const graph = new Graph({
      container: this.container.nativeElement,
      width: 500,
      height: 500,
      data: {
        nodes: [
          {
            id: 'node-1',
            style: { x: 50, y: 100 },
          },
          {
            id: 'node-2',
            style: { x: 150, y: 100 },
          },
        ],
        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
      },
    });

    graph.render();
  }
}