Modelize a Matrix and a A* path in my Ionic App


Hi there,

I’d like to have your advices about something I have to do!

I have an Ionic v3 application.
I have a matrix like this :
matrix = [ [0, 1, 0, 1, 0, 1, 0],
[0, 1, 0, 1, 0, 0, 0],
[0, 1, 0, 0, 0, 1, 0],
[0, 0, 0, 1, 0, 1, 0] ]

I’d like to draw and display a div with whites squares if I have a 0 and black squares if I have a 1.

Do you know how could I make this ?

Thank you for reading !


maybe you should use structural directives to iterate over maxtrix and a second time over array inside matrix and decide what to insert with ngif

<ng-container *ngFor="let arrayinside of matrix">
   <ng-container *ngFor="let item of arrayinside ">
<div *ngIf="item == 0" style='whatever'></div>
<div *ngIf="item == 1" style='whateverelse'></div>

Or any simular structure directives, see for example or

Best regards, anna-liebt


Hey thank you for your reply!

I will take a look at this! :slight_smile:

I heard I could use HTML Canvas, do you think it is a good idea or what you suggest is easier/better ?


better? Depends what you wanna do?
Painting? Take canvas.
Simple and easy extendable? Take div
Learn something new with advandages? Take svg
Relax? Take a six pack.

Best regards, anna-liebt.


Ah ah Thank you!

To make easily understandable;

I have implemented A* Pathfinding Algorithm in typescript.

So I have a matrix with 0 for walkable, 1 for not walkable.
I define 1 start position [Ax, Ay], and an array with multiple goals position [[Bx,By], [Cx,Cy] …].

I get the distance and the path between/from A to B, A to C and I take the smallest one.
I push the smallest path in an array called "myPath"
Then I get the path from (for exemple if A to B was the smallest one) B to C and I push the path into “myPath”

So at the end,

I have my matrix with 0 and 1
I have my path from A to C passing through B : [ [A -> B] , [B -> C] ] ==> [ [ [Ax, Ay], [0,1], [0,2], [Bx, By] ] ,
[ [Bx, By], [0,4 ], [0,5], [Cx, Cy] ]

I’d like to modelize my matrix with whites and blacks squares and to modelize my path with greens squares

I hope you have understood everything because I don’t speak english very well!

Bye! :slight_smile:



as wrote div is simple and extendable, so it would fit good to your needs. Please think about, div is a block element, but you can unblock it.
Div can used and handled in a wide range. Take a look to div tables and flexbox layouts.

Best regards, anna-liebt


Okay, thank you :slight_smile:
I will take a look!

I try to use div. => Works perfectly, I can display Black squares for value 1 and whites squares for value 0.

My problem is : I have my path from A to C passing through B : [ [A -> B] , [B -> C] ] ==>
[ [Ax, Ay], [0,1], [0,2], [Bx, By] ] ,
[ [Bx, By], [0,4 ], [0,5], [Cx, Cy] ]

I’d like to display in green, the positions of my path.

Thank you very much for your help!


Sorry my english is not really good, so sorry but I do not understand what the problem is.

Best regards, anna-liebt


Sorry, I have updated my previous post :slight_smile:



I personal would prefer a custom component, that have propertys and methods.

But if we stay at previous solution you could extend to a third div with your style and your matrix has 0, 1, 2 to indicate which div should used.

A different way is maybe using only one div but use ngstyle, ngclass , etc… for styling the div.

Best regards, anna-liebt


It’s the solution I wanted to try! Maybe it’s not the best one, but I’m gonna try! I will tell you if I succeed or not!

Thank you for your help :smiley: