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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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
Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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 HansenCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.