I'm new to NGX-GRAPH. I'm trying to build an oriented graph. This is my code:
ngx-graph.component.html:
<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
[links]="links"
[nodes]="nodes"></ngx-graph>
ngx-graph.component.ts:
import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Edge, Node} from '@swimlane/ngx-graph';
@Component({
selector: 'app-ngx-graph',
templateUrl: './ngx-graph.component.html',
styleUrls: ['./ngx-graph.component.scss']
})
export class NgxGraphComponent implements OnInit {
id: number;
constructor(private serverService: ServerService, private route: ActivatedRoute) { }
nodes: Node[] = [];
links: Edge[] = [];
ngOnInit() {
this.id = +this.route.snapshot.params.id;
this.serverService.getGraphGivenEndpointId(this.id).subscribe(
response => { this.nodes = response[0];
this.links = response[1];
console.log(this.nodes);
}
);
}
}
This is my JSON returned by a service:
(2) [{…}, {…}]
0: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
1: {id: "second", label: "B", meta: {…}, dimension: {…}, position: {…}, …}
2: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
length: 3
__proto__: Array(0)
ServerService.ts:
@Injectable()
export class ServerService {
constructor(private http: HttpClient, private elencoEndpointService: ElencoEndpointService) {}
getGraphGivenEndpointId(id: number) {
return this.http.get('http://localhost:8080/app/endpoint?id=' + id);
}
}
With this code, the library works fine. I obtain the basic graph, like the one in the "quickstart" page https://swimlane.github.io/ngx-graph/#/#outputs.
But if I try to customize the nodes adding only this part without changing anything else:
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height"
[attr.fill]="node.data.color" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
</svg:text>
</svg:g>
</ng-template>
My ngx-graph.component.html becomes:
<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
[links]="links"
[nodes]="nodes"
>
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height"
[attr.fill]="node.data.color" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
</svg:text>
</svg:g>
</ng-template>
</ngx-graph>
the nodes in the graph disappear and the edge are still displayed but without nodes. I get no error in console or in angular.
I also added this code to my ngx-graph.component.ts, to trigger an update but nothing changed:
this.nodes.forEach(element => {
this.nodes.push(element);
this.nodes = [...this.nodes];
});
This is my app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes, Router} from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { AddEndpointComponent } from './add-endpoint/add-endpoint.component';
import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ElencoEndpointComponent } from './elenco-endpoint/elenco-endpoint.component';
import { ElencoEndpointService } from './elencoEndpoint.service';
import { HomePageComponent } from './home-page/home-page.component';
import { HttpClientModule } from '@angular/common/http';
import { ServerService } from './server.service';
import { NgxGraphModule } from '@swimlane/ngx-graph';
import { NgxGraphComponent } from './ngx-graph/ngx-graph.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {A11yModule} from '@angular/cdk/a11y';
import {TextFieldModule} from '@angular/cdk/text-field';
const appRoutes: Routes = [
{path: '', component: HomePageComponent},
{path: 'add-endpoint', component: AddEndpointComponent},
{path: 'view-endpoint', component: ElencoEndpointComponent},
{path: 'view-endpoint/:id', component: NgxGraphComponent},
];
@NgModule({
declarations: [
AppComponent,
MainNavComponent,
AddEndpointComponent,
ElencoEndpointComponent,
HomePageComponent,
NgxGraphComponent,
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(appRoutes),
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatSidenavModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
NgxGraphModule,
FormsModule,
ReactiveFormsModule,
ScrollingModule,
A11yModule,
TextFieldModule,
],
providers: [ElencoEndpointService, ServerService],
bootstrap: [AppComponent]
})
export class AppModule { }
I have follow this:
Quick Start Install the package: npm install @swimlane/ngx-graph --save
Import NgxGraphModule into your angular module
Add the ngx-graph component
What is the problem?
Maybe I have to import something else that is not specify in the quickstart page?
Thanks in advance.
