I have a specific class definition for my Project:
export class Project {
$key: string;
file: File;
name: string;
title: string;
cat: string;
url: string;
progress: number;
createdAt: Date = new Date();
constructor(file: File) {
this.file = file;
}
}
Within my upload component, I successfully upload all the project information to my database/storage.
Next, I display all the Projects in the home.component as follows:
Upload.Service :
getUploads() {
this.uploads = this.db.list(`profile/${this.auth.userId}/project`).snapshotChanges().map((actions) => {
return actions.map((a) => {
const data = a.payload.val();
this.showVisualContent(data.url, data.name);
const $key = a.payload.key;
const $ref = a.payload.ref;
return { $key, ...data, $ref };
});
});
return this.uploads;
}
Home.Component :
uploads: Observable<Project[]>;
ngOnInit() {
this.uploads = this.navSrv.getUploads();
}
Home.html :
<div *ngFor="let project of uploads | async" class="responsive-width">
<mat-card-title class="project-card-title">{{project.name}}</mat-card-title>
</div>
This approach allows me to showcase all projects in the home.component. What I aim to achieve is:
- Click on one of the projects within the home.component.
- Transition to a child component.
- Display only the clicked project's information (not all projects).
While I have limited knowledge about event emitters (which I may need to utilize), I am unsure how to access the specific project that was clicked and display it in the child component. How can I accomplish this?
getOneProject() { //and pass it to another component
}