I am facing an issue with getting the event from a dumb component. Initially, I thought everything was working fine as the output seemed okay. However, upon changing the event's value, it does not bind to the smart component and no error is displayed.
// planet-data.component.html ( Smart component )
<div class="main">
<app-loading *ngIf="loading"></app-loading>
<app-planet-view [pics]="pics" class="fixed" (selected)="onSelect($event)"></app-planet-view>
</div>
// planet-data.component.ts
onSelect(event: Cam) {
if (event.name === 'CHEMCAM') {
this.loading = true;
this.getCamType();
} else {
this.loading = true;
event.name === 'NAVCAM' ? this.getCamType('spirit', 'navcam') : this.getCamType('opportunity', 'fhaz');
}
}
// dropdown-menu.component.html ( Dumb component )
<p-dropdown [options]="cameras" [(ngModel)]="selectedCam" placeholder="Select a Cam" optionLabel="name"
(ngModelChange)="getDisplayCam($event)">
</p-dropdown>
// dropdown-menu.component.ts
getDisplayCam(event: Cam) {
this.selected.emit(event);
}
// planet-view.component.html ( Another Dumb component )
<div *ngIf="pics">
<div *ngFor="let pic of pics.photos">
<div class="card" style="width: 16rem;">
<img class="card-img-top" src="{{pic.img_src}}" alt="Card image cap">
<p>{{pic.earth_date | date}}</p>
</div>
</div>
<h4>{{title}}</h4>
<app-dropdown-menu></app-dropdown-menu>
</div>