Where does the "fireEvent(e)" function get defined?
Where does the "fireEvent(e)" function get defined?
In my working code here, I see I added that function. Is it possible to tell me the origins of the call from this source code?
In my working code here, I see I added that function. Is it possible to tell me the origins of the call from this source code?
import { Component, Input, OnInit } from '@angular/core';
import { NgFor } from '@angular/common';
import { PuzzlePieceComponent } from '../puzzlepiece/puzzle-piece.component';
@Component({
selector: 'puzzle-canvas',
templateUrl: './puzzle-canvas.component.html',
styleUrls: ['./puzzle-canvas.component.css']
})
export class PuzzleCanvasComponent implements OnInit {
title = 'Puzzle Peace';
@Input() piece:PuzzlePieceComponent;
pieces = [];
rowNames = [];
columnNames = [];
columns:number = 8;
rows:number = 5;
constructor() {
this.rowNames = ['1', '2', '3', '4', '5' ];
this.columnNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H' ];
}
fireEvent(e){
console.log(e.type);
}
ngOnInit() {
let index = 0;
for(let row = 0; row < this.rows; row++) {
for(let column = 0; column < this.columns; column++) {
this.pieces[index] = new PuzzlePieceComponent();
this.pieces[index].id=index;
this.pieces[index].row = this.rowNames[row];
this.pieces[index].column = this.columnNames[column];
index++;
}
}
}
}SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes, now I recall seeing that usage.
Where would that go? In the template, associated with a button, for example?
Where would that go? In the template, associated with a button, for example?
It would be typically in the Template - but it could be attached to anything really.
ASKER
You mean, it could be called from within the TypeScript? If so, I presume the function that calls fireEvent() also needs to have a $event as an input param?
You can call it from the typescript code but that is not a typical invocation. The event parameter indicates you are expecting an event to be passed to your code. Events are typically generated in the view - so most likely this is where it was meant to trigger.
ASKER
Where might that call to fireEvent() fit in this code if you added some dummy action?
<div class="puzzle">
<ng-container *ngFor="let item of pieces, 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 class="column-number" *ngFor="let i of columnNames" >{{ i }}</div>
</div>
Anywhere - as I said the function does not define a use case.
Any element could have the following attribute added to it.
Any element could have the following attribute added to it.
(click)="fireEvent($event)"ASKER
So, would this provide a fireEvent() event to each puzzle-piece defined above?
<puzzle-piece [value]="item" [pos]="i" (click)="fireEvent($event)
<puzzle-piece [value]="item" [pos]="i" (click)="fireEvent($event)
Yup it would
ASKER
thanks
You are welcome.
ASKER
Open in new window
I do not recall deleting the code that called fireEvent(), but I suspect I used it to debug my code.
Where would this call go? It seems to output one event.