How to pass value to ng-content Angular8?

Question

JavaScript

There is such an Angular 8 component:

// a.component.ts
@Component({
  selector: 'app-a'
  templateUrl: './a.component.html',
})
class AComponent {
    @Input() text: string;
}
// a.component.html
<ng-content></ng-content>

And like this:

// b.component.ts
@Component({
  selector: 'app-b'
  templateUrl: './b.component.html',
})
class BComponent{
    @Input() text: string = "none";
}

// b.component.html
<div>
    text: {{ text }}
</div>

How to do so to use not like this:

// app.component.html
<app-a text="ABCDE">
    <app-b text="ABCDE"></app-b>
    <app-b text="ABCDE"></app-b>
    <app-b text="ABCDE"></app-b>
</app-a>

And like this, and the text "ABCDE" was passed to all nested app-b components already from the a.component.html template itself:

// app.component.html
<app-a text="ABCDE">
    <app-b></app-b>
    <app-b></app-b>
    <app-b></app-b>
</app-a>

Answer 1

At the app-a level, in providers, write a service that will receive data for further distribution, in the same component, write data from @Input to the service.
Inject the created service into app-b and take data from it