The Solution

[ezzabuzaid]

Hint: I'll explain the implementation later on. keep reading for now.

What if you can remove the inputs and only have a generic one that could be accessed from anywhere in the tree, like this

@Component({
  selector: 'app-root',
  template: `
    <context name="FamilyContext">
      <provider name="FamilyContext" [value]="familyNameValue"> // This part
        <app-grandchild> </app-grandchild>
      </provider>
    </context>
`
})
export class AppComponent { }

And for the component that needs the value

@Component({
  selector: 'app-grandchild',
  template: `
    <consumer name="FamilyContext">
        <ng-template let-value>
           Family Name: {{value}}
        </ng-template>
    </consumer>
`
})
export class GrandchildComponent { }

While this approach seems to work, I do not think a lot of people will agree on this, I myself thought about sandboxing first, maybe that's why there's no like to React Context API in Angular. but again see it as a different way to achieve the same result.

By now it's clear what problem does Context API solves. It's time to see how it works.