@Corry, the last StackBitz that you have put is a example of comunicate parent and children via service: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
So, your projectlist.component.html can be like
<select #project (change)="changeProject(project.value)">
<option *ngFor="let projectElement of projects"
[value]="projectElement.id">{{projectElement.name}}</option>
</select>
See that if the select change, we call the function changeProject as argument the "id" of the project selected
And in projectlist.component.ts
ngOnInit() {
this.projects = this.projectService.getProjects();
//See that this.projectService.getProject it's NOT an observable
//just the elements. If this function was an observable
// we must subscribe to it
//At first call the function with the first element
this.changeProject(this.projects[0].id);
}
changeProject(value:any)
{
//"emit" a new value in the observable of the service
this.projectService.projectSelected.emit(this.projects.find(d=>d.id==value));
}
Anyway, it's a "bizarro" code. If you want to have two relationated select (and allways if the elements are not many, you can simply
export class ProjectsComponent implements OnInit {
selectedProject: Project;
projects:Project[];
constructor(private projectService: ProjectService) { }
ngOnInit() {
this.projects = this.projectService.getProjects();
this.selectedProject=this.projects[0];
}
}
And your ProjectsComponent .html like
<form>
<select name="project" [(ngModel)]="selectedProject">
<option *ngFor="let projectElement of projects"
[ngValue]="projectElement">{{projectElement.name}}</option>
</select>
<select >
<option *ngFor="let task of selectedProject?.tasks">{{ task.name }}
</option>
</select>
</form>