How to find a parent using Angular DI

table-row.component.html

<ng-content></ng-content>

table-row.component.ts

import { Component, forwardRef, Input } from '@angular/core';
import { View } from 'projects/view/src/public-api';


@Component({
  selector: 'ces-table-row',
  templateUrl: './table-row.component.html',
  styleUrls: ['./table-row.component.scss'],
  providers: [{
    provide: View, useExisting: forwardRef(() => TableRowComponent)
  }]

})
export class TableRowComponent implements View {
  @Input() id!: number;
  @Input() index: number = -1;
  
  constructor(
  ) { }

}

task-view-table.component.html

<ces-table>
    <ces-table-row class="header">
        <ces-table-column>Actions</ces-table-column>
        <ces-table-column>id</ces-table-column>
        <ces-table-column>status</ces-table-column>
        <ces-table-column>updated</ces-table-column>
        <ces-table-column>title</ces-table-column>
        <ces-table-column>notes</ces-table-column>
    </ces-table-row>
    <ces-table-row *ngFor="let task of tasks; let index = index;" [id]="task.id" [index]="index">
        <ces-table-column class="justify-center">
            <ces-view-pin [active]="task.pinned"></ces-view-pin>
            <ces-view-delete></ces-view-delete>
        </ces-table-column>
        <ces-table-column class="justify-center">{{ task.id }}</ces-table-column>
        <ces-table-column class="justify-center">
            <ces-task-menu-statuses [default]="task.status"></ces-task-menu-statuses>
        </ces-table-column>
        <ces-table-column>{{ task.dateUpdated | date: 'short' }}</ces-table-column>
        <ces-table-column>{{ task.title }}</ces-table-column>
        <ces-table-column>{{ task.notes }}</ces-table-column>
    </ces-table-row>
</ces-table>

task-view-table.component.ts

import { Component, OnDestroy } from '@angular/core';
import { Task } from '../../task';
import { TaskService } from '../../task.service';
import { ViewService } from 'projects/view/src/public-api';
import { Subscription } from 'rxjs';
import { ApiBoolean } from 'projects/api/src/public-api';

@Component({
  selector: 'ces-task-view-table',
  templateUrl: './task-view-table.component.html',
  styleUrls: ['./task-view-table.component.scss']
})
export class TaskViewTableComponent implements OnDestroy {

  tasks!: Task[];
  tasks$: Subscription;
  change$: Subscription;
  ApiBoolean = ApiBoolean;

  constructor(
    private _taskService: TaskService,
    private _viewService: ViewService
  ) { 

    this.tasks$ = this._taskService.getTasks()
    .subscribe(response => {
      this.tasks = response.entries;
    });

    this.change$ = this._viewService.change$
    .subscribe(change => {
      console.log('change', change)
    })
  }

  ngOnDestroy() {
    this.tasks$?.unsubscribe();
    this.change$?.unsubscribe();
  }

}

view-delete.component.html

<button *ngIf="!active; else deleteOptions" class="inherit fade-in" (click)="showOptions()">
    <ces-svg size="xs" type="trash-no-lines"></ces-svg>
</button>

<ng-template #deleteOptions>
    <div class="fade-in">
        <button class="inherit">
            <ces-svg size="xs" type="x-circle" (click)="cancel()"></ces-svg>
        </button>
        <button class="inherit">
            <ces-svg size="xs" type="trash" (click)="delete()"></ces-svg>
        </button>
    </div>
</ng-template>

view-delete.component.ts

import { Component, Input, Optional } from '@angular/core';
import { ApiChange } from 'projects/api/src/public-api';
import { View } from '../view';
import { ViewService } from '../view.service';

@Component({
  selector: 'ces-view-delete',
  templateUrl: './view-delete.component.html',
  styleUrls: ['./view-delete.component.scss']
})
export class ViewDeleteComponent {

  @Input() active: boolean = false;

  constructor(
    protected _viewService: ViewService,
    @Optional() public view: View
  ) { }

  showOptions() {
    this.active = true;
  }

  cancel() {
    this.active = false;
  }

  delete() {
    const message: ApiChange = {
      id: this.view.id,
      index: this.view.index,
      action: 'delete',
    }
    this._viewService.setChange(message);
  }
}