title: Angular Initialize one component from another component and service
body: <p>There is a structure of the app with <code>projects</code> component which contains <code>project</code> and <code>tasks</code> component which contains child component <code>task-detail</code> and also there is another module called <code>schedule</code> and shared folder with service and models of the app:</p>
  
  <h2><a href="https://i.stack.imgur.com/WBmc6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WBmc6.png" alt="structure of the angular app"></a></h2>
  
  <p>I'm trying to initialize <code>task-detail</code> component from different places (from its parent component <code>tasks</code> and also from <code>ScheduleService</code> via button). I managed in first solution with <code>property binding</code> and <code>Input</code></p>
  
  <p><strong>tasks.component.html</strong></p>
  
  <pre><code>&lt;app-task-detail *ngIf="selectedTask" [task]="selectedTask?.schedules"&gt;&lt;/app-task-detail&gt;
  </code></pre>
  
  <p><strong>task-detail.component.ts</strong></p>
  
  <pre><code>export class TaskDetailComponent implements OnInit {
    @Input() task: Task;
  
    constructor(private scheduleService: ScheduleService) { }
  
    ngOnInit() {
    }
  
    onSelected() {
      this.scheduleService.buttonClicked.emit(this.task);
    }
  
  }
  </code></pre>
  
  <p>but I cannot do this clicking on the button.</p>
  
  <p>Here is a <a href="https://stackblitz.com/edit/cascading-dropdown-zwsqh2" rel="nofollow noreferrer">stackblitz</a>. I'm trying to get same result (Task Detail!) clicking on button or selecting task (which works now). </p>