Need to add Column and Row to the HTML

I am successfully generating unique column and row names for each puzzle piece, but need to get those values onto the page.

The values, on the last lines, are logging correctly to the console.

    ngOnInit() {
    this.id = this.value.id;
    this.row = this.value.row;
    this.column = this.value.column;

    this.imageFilename = "PuzzlePiece_Maps_" + (this.value.id + 1).toString() + ".gif";
    this.isDogEared = this.dogEarIndexes.indexOf(this.id) > -1;
    console.log('Id:'+this.id + " - " + "row:" + this.row + " column:" + this.column + " " + this.imageFilename + " isDogEared="+ this.isDogEared.toString());    
  }
}

Open in new window


but, I am unsure how to insert the row and column values on the page.

 added a dog-ear class thusly:

    <div [ngClass]="{ 'dog-ear' : isDogEared }"></div>

Open in new window


I need the row and column on the HTML since I plan to flip the puzzle piece over and display the column and row name. Is the logic for this as simple as creating a click event which toggles a boolean? Then, on the HTML template, simply using that boolean to display one div or another?

I also need the column and row names on the canvas, so like a spreadsheet, I can show the entire puzzle thusly...

       A     B     C     D    E     F    G     H
1
2
3
4
5
 
So, i need to find where to insert those values here also:
<div class="puzzle">
    <puzzle-piece *ngFor="let piece of pieces, let i=index" [value]="piece"></puzzle-piece>
</div>

Open in new window


I set those column and row names in the puzzle-canvas component:

  constructor() { 
    this.rowNames = ['1', '2', '3', '4', '5' ];
    this.columnNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ];
  }

Open in new window


Thanks.
newbiewebSr. Software EngineerAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
The difference between doing things in your head and doing them in practice.

i played around and came up with this
<div class="puzzle">
    <ng-container *ngFor="let item of piece, let i = index">
        <div class="puzzle-piece row-number" *ngIf="i%8==0">{{rowNames[i/8]}}</div>
        <puzzle-piece [value]="item" [pos]="i"></puzzle-piece>
    </ng-container>
</div>

Open in new window

.row-number {
    width: 4%;
    float: left;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    z-index: 10;
    vertical-align: middle;
    line-height: 12%;
}

Open in new window

The above implies that you must change your puzzle-piece styling to 12% width rather than 12.5

This works - but the numbers are not vertically aligned.

I am thinking that a different approach might be better - possibly using flex-box. Another approach is to render the row and column headings outside of the puzzle container.

I haven't time to play with this anymore now - this should give you a start
0
 
Julian HansenCommented:
For the column headings you do a separate ngFor on the column headings array - making sure that you have a blank in the first position - this can be done in html code or by adding a blank entry to the array

The row names you can obtain by using a template and the index of the main array
<ng-container *ngFor="let piece of pieces, let i=index">
      <div *ngIf="i%PUZZLEWIDTH == 0" class="rowclass">{{rowNames.shift()}}<div>
      <puzzle-piece [value]="piece"></puzzle-piece>
</ng-container>

Open in new window


Then style rowclass appropriately to keep it inline with the puzzle pieces.

EDIT
Updated - did not see you have a wrapping methodology on the puzzle pieces. In which case you would need to use the ngIf directive coupled with the % operator to decide when to output the next row name. PUZZLEWIDTH is the number of tiles in a row.

EDIT 2
Can't use i index into rownames - use shift() to pull the next one when appropriate
0
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks for the help. I'll try and get the numbers 1 to 5 displaying on the left axis, then deal with column heading as a different question.

For now, I have added a new temporary class "rowclass" to force the next row to display:

.puzzle {
    width: 80%;
    margin: 0 auto;
}

.rowclass {
    height: 117px;
}

Open in new window


but I did not see the value of rowName displaying on the left side:

<ng-container *ngFor="let piece of pieces, let i=index">
    <div *ngIf="i%8 == 0" class="rowclass">{{rowNames.shift()}}<div>
    <puzzle-piece [value]="piece"></puzzle-piece>
<!--/ng-container-->

Open in new window


I see the proper tiles on the single column, as expected. But I do not see the row number to the left of it.

correct tiles, no row numbers
I also see an error on the closing tags...

When I end with </ng-container>

I get the following error:

closing tag error
but by removing the end tag altogether causes other errors. (Commented out on source code above)
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
Julian HansenCommented:
Typo from my original post
Closing div is missing a / should be
<div *ngIf="i%8 == 0" class="rowclass">{{rowNames.shift()}}</div>

Open in new window

That is the cause of the error and probably of the formatting issues. I have not tested yet but give that a go and if still not working post back and I will see if I can roll out a sample.
0
 
newbiewebSr. Software EngineerAuthor Commented:
That missing tag was indeed a problem. But the following code still fails:

<ng-container *ngFor="let piece of pieces, let i=index">
    <div *ngIf="i%8 == 0" class="rowclass">{{rowNames.shift()}}</div>
    <puzzle-piece [value]="piece"></puzzle-piece>
</ng-container>

Open in new window


I get an ExpressionChangedAfterItHasBeenCheckedError

as you can see, the puzzle pieces display correctly, but with no leading rowName value, which I expected on the left edge.

Also, there's an error that pops up after the final puzzle piece is drawn.

 ExpressionChangedAfterItHasBeenCheckedError
0
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks. The great news is...

Once I changed to plural for:
"let item of pieces"

 the page rendered and with no errors. But there is a tiny styling issue (or two) that I have not been able to fix:

row wrapping
The row wraps and the displayed row number does not want to center itself. The row number proximity is not such as big a deal as the row wrapping to the next line, and can be solved later.

puzzle-canvas.component.css
.puzzle {
    width: 80%;
    margin: 0 auto;
}

.rowclass {
    height: 117px;
}

.row-number {
    width: 4%;
    float: left;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    z-index: 10;
    vertical-align: middle;
    line-height: 12%;
}

Open in new window


puzzle-piece.component.css
.puzzle-piece {
    width: 12.5%;
    float: left;
    box-sizing: border-box;
    background-color: #007acc;
    position: relative;
    /*padding-bottom: 12.5%;*/
    border-right: 1px solid blue;
    border-bottom: 1px solid blue;
    text-align: center;
    z-index: 10;
}

.puzzle-piece img {
    width: 100%;
    display: block;
}

.dog-ear {
	position: absolute;
	top: 0;
	right: 0;
	height: 20px;
	width: 20px;
	background: linear-gradient(45deg, #333 0%, #333, #fff 50%, #fff 100%);
}

Open in new window


Thanks for the help.
0
 
Julian HansenConnect With a Mentor Commented:
width: 12.5%;

Open in new window

Needs to be
width: 12%;

Open in new window

0
 
newbiewebSr. Software EngineerAuthor Commented:
I guess I really need to pay more attention to your posts. Thanks!

It works!
0
 
newbiewebSr. Software EngineerAuthor Commented:
AndI can force the row number lower with this "hard coding"

    margin-top: 25px;
0
 
newbiewebSr. Software EngineerAuthor Commented:
thanks
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.