I am currently working on a project using Angular 2. Within this project, I have created two components: WorkspacesComponent and PagesComponent.
In the database, each workspace contains a number of pages. I have written the code below to display the list of workspaces in the WorkspacesComponent and the list of pages in the PagesComponent.
Retrieving workspaces from the database
this.workspaceService.getAllWorkspaces(this.baseUrl)
.subscribe((workspaces) => {
this.workspaces = workspaces;
console.log(this.workspaces);
});
Obtaining pages from the database
this.pagesService.getAllpages(this.baseUrl)
.subscribe((pages) => {
this.pages = pages;
console.log(this.pages);
});
Currently, both functions are successfully fetching the correct data. However, my goal is to enable the functionality where selecting a workspace in the WorkspaceComponent will display only the pages within that specific workspace in the PagesComponent.
https://i.sstatic.net/UY7dO.png
This means that upon clicking a workspace, its index should be passed to the following method:
getPagesByWorkspaceId(index:string){
console.log(index);
}
The above method will then populate the list of pages within that particular workspace. My challenge lies in figuring out how to call a method in the PagesComponent from the WorkspacesComponent.
Any suggestions or insights would be greatly appreciated.