Where does the "fireEvent(e)" function get defined?

curiouswebster
curiouswebster used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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 Engineer

Author

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.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

curiouswebsterSoftware Engineer

Author

Commented:
Yes, now I recall seeing that usage.

Where would that go? In the template, associated with a button, for example?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
It would be typically in the Template - but it could be attached to anything really.
curiouswebsterSoftware Engineer

Author

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?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 Engineer

Author

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

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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 Engineer

Author

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>
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Yup it would
curiouswebsterSoftware Engineer

Author

Commented:
thanks
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial