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?

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++;
      }
    }
  }
}

Open in new window

curiouswebsterSoftware EngineerAsked:
Who is Participating?
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:
What does your view code look like.

fireEvent() in this case looks like a method that is invoked from the view on some event in the view.
curiouswebsterSoftware EngineerAuthor Commented:
Here is the form...

<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>

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.
Julian HansenCommented:
I have no idea why you created it so I can't tell you where you put it.

All I can see is a custom method in your class - how you planned to use that is entirely up to you.

You could have had a (click)="fireEvent($event)" somewhere in your code which would have triggered it - but this is just an example.

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
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

curiouswebsterSoftware EngineerAuthor Commented:
Yes, now I recall seeing that usage.

Where would that go? In the template, associated with a button, for example?
Julian HansenCommented:
It would be typically in the Template - but it could be attached to anything really.
curiouswebsterSoftware EngineerAuthor Commented:
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?
Julian HansenCommented:
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.
curiouswebsterSoftware EngineerAuthor Commented:
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>

Open in new window

Julian HansenCommented:
Anywhere - as I said the function does not define a use case.

Any element could have the following attribute added to it.
(click)="fireEvent($event)"

Open in new window

curiouswebsterSoftware EngineerAuthor Commented:
So, would this provide a fireEvent() event to each puzzle-piece defined above?

<puzzle-piece [value]="item" [pos]="i" (click)="fireEvent($event)></puzzle-piece>
Julian HansenCommented:
Yup it would
curiouswebsterSoftware EngineerAuthor Commented:
thanks
Julian HansenCommented:
You are welcome.
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
Web Development

From novice to tech pro — start learning today.