I have a pair of elements: pictures and camera, with camera as the child element.
Within the camera element, I have the following TypeScript snippet (abbreviated):
@Component({
selector: 'app-camera',
templateUrl: './camera.component.html',
styleUrls: ['./camera.component.scss']
})
export class CameraComponent implements OnInit {
@Output('onPictureTaken') picture = new EventEmitter<WebcamImage>();
public webcamImage: WebcamImage;
pictureTaken(){
this.picture.emit(this.webcamImage)
}
accompanied by this HTML code:
<button class="actionBtn" (click)="pictureTaken();">Take A Snapshot</button>Inside the pictures component, here is the TypeScript content instead:
export class PicturesComponent implements OnInit {
// @Output('picture') picture: WebcamImage;
public pictures: WebcamImage[];
constructor() {}
ngOnInit(): void {}
onPictureTaken(picture: WebcamImage){
this.pictures.push(picture);
console.log("picture taken!!!");
}
}
With the corresponding HTML markup:
<app-camera ></app-camera>
<table>
<caption>Photos: </caption>
<tr (onPictureTaken)="onPictureTaken($any($event))"> </tr>
</table>
Despite all attempts, I am unable to trigger the onPictureTaken function and see the message 'picture taken!!!' in the console. Any guidance?