Nested *ngFor for e-connector element

[Mohamed Karkotly]

Hi!

I'm using this ejs-diagram with some modifications in my Angular v13 app, and I was wondering if I can use *ngFor inside an e-connector.

Here's my code

<e-connectors>
    <e-connector *ngFor="let parent of nodes[1].parents" [sourceID]="parent" [targetID]="nodes[1]._id"></e-connector>
    <e-connector *ngFor="let parent of nodes[2].parents" [sourceID]="parent" [targetID]="nodes[2]._id"></e-connector>
    <e-connector *ngFor="let parent of nodes[3].parents" [sourceID]="parent" [targetID]="nodes[3]._id"></e-connector>
    <e-connector *ngFor="let parent of nodes[4].parents" [sourceID]="parent" [targetID]="nodes[4]._id"></e-connector>
    <e-connector *ngFor="let parent of nodes[5].parents" [sourceID]="parent" [targetID]="nodes[5]._id"></e-connector>
    <e-connector *ngFor="let parent of nodes[6].parents" [sourceID]="parent" [targetID]="nodes[6]._id"></e-connector>
</e-connectors>

With the following demonstration of how it looks like:

And here's what I expected would work but it didn't

<e-connectors *ngFor="let node of nodes">
    <e-connector *ngFor="let parent of node.parents" [sourceID]="parent" [targetID]="node._id"></e-connector>
</e-connectors>

[Aravind Ravi]

Hi Mohamed,

We have created a sample to render the connectors using ngFor loop. When we tried to render the connector using ngFor,  the sample has been rendered properly. Please refer to the below code snippet and sample

 

//TS

public connectors = [

    { sourceID: 'node1', targetID: 'node2', name: 'connector1' },

    { sourceID: 'node2', targetID: 'node3', name: 'connector2' },

    { sourceID: 'node3', targetID: 'node5', name: 'connector3' },

    { sourceID: 'node5', targetID: 'node4', name: 'connector4' },

  ];

 

//HTML

<e-connectors>

          <e-connector

            *ngFor="let connector of connectors"

            id="{{ connector.name }}"

            [sourceID]="connector.sourceID"

            [targetID]="connector.targetID"

          >

          </e-connector>

        </e-connectors>

Sample: https://stackblitz.com/edit/angular-6d3f8j-7frgyv?file=app.component.ts

Regards

Aravind Ravi

[Mohamed Karkotly]

Hi Aravind! Thanks for the quick response.

It looks like my question was misinterpreted, as you can see, I'm already looping through the e-connector element:

*ngFor="let parent of nodes[1].parents"

But what I asked was how to loop inside them twice, like how can I replace node[1] with node[i]?

To make it more clear, check the following image

Now it would go like this..
For each node, then for each parent, draw an arrow where the source is parent, and the target is the node itself.

So for example, the first ngFor is getting me to node 5, but I need another ngFor to check with all of its parents.

Hope it's more clear now.

And thanks in advance!

[Aravind Ravi]

Hi Mohamed,

Could you please share your JSON data that you are iterating the connectors, so that we can analyze and provide a solution based on your data.

Regards

Aravind Ravi

[Mohamed Karkotly]

Hi Aravind!

Sure, here's my JSON data

[
  {
      "_id": "62891408d3ff741c7602bd7a",
      "label": "Web",
      "parents": []
  },
  {
      "_id": "6289143bd3ff741c7602bd7d",
      "label": "HTML",
      "parents": [
          "62891408d3ff741c7602bd7a"
      ]
  },
  {
      "_id": "62a0648cd2e5a7ecaf1ad174",
      "label": "CSS",
      "parents": [
          "62891408d3ff741c7602bd7a"
      ]
  },
  {
      "_id": "62a066dfd2e5a7ecaf1ad1cf",
      "label": "JS",
      "parents": [
          "62891408d3ff741c7602bd7a"
      ]
  },
  {
      "_id": "62a06903d2e5a7ecaf1ad214",
      "label": "Flexbox",
      "parents": [
          "62a0648cd2e5a7ecaf1ad174"
      ]
  },
  {
      "_id": "62a0eca2271609ad30f312e2",
      "label": "Selectors",
      "parents": [
          "6289143bd3ff741c7602bd7d",
          "62a0648cd2e5a7ecaf1ad174"
      ]
  },
  {
      "_id": "62a0e73a271609ad30f312c7",
      "label": "Justify Content",
      "parents": [
          "62a06903d2e5a7ecaf1ad214"
      ]
  }
]

P.S: I know it's possible to map the parents ​key for each object to match ReportingPerson ​key in DataManager class, but I was looking forward to achieve this using *ngFor inside my template, because this matches my use case better.

Thanks.

[Mohamed Karkotly]

I was hoping I wouldn't end up doing the following

 // TS
 ngOnInit() {
    this.mapConnections();
  }


  mapConnections() {
    this.connections = [];
    this.nodes.forEach((node) => {
      node.parents.forEach((parent) => {
        this.connections.push({ id: node._id, parent: parent });
      });
    });
  }

 // HTML
 <e-connector *ngFor="let connection of connections" [sourceID]="connection.parent" [targetID]="connection.id"></e-connector>

But it's alright if there were no another way.

Thanks for your time.

[Shyam G]

Hi Mohamed,

We have created a sample similar to your requirement and provided the sample link below.

Sample: https://stackblitz.com/edit/angular-6d3f8j-dejurj?file=app.component.ts,app.component.html

Regards,

Shyam G

[Mohamed Karkotly]

Hi Shyam!

Nevermind, I got this to work, and your propsed solution isn't the thing that solves my problem, but thanks for your time!

Regards.

[Shyam G]

Hi Mohamed,

We are happy to hear that problem is resolved.

Regards,

Shyam G