angular passing input to child components in ng-content

Question

I want to pass some properties from a parent component to a child component using content projection, is that possible?

For e.g. this is my template:

<my-form [display]="'horiz'">
  Email: <my-input [type]="'email'" ...></my-input>
  Name: <my-input [type]="'name'" [display]="'vert'" ...></my-input>
  ...
</my-form>

Now the my-form component has the template like this:

<form ...>
  <ng-content></ng-content>
</form>

What I want is that the display property of my-form can be accessed by the my-input components, such that it can be overriden by the my-input component as well, like it is for the Name input.

Is that possible?

Answer 1

You can use @ContentChildren , made an example on stackblitz:

https://stackblitz.com/edit/angular-content-children-example

I have modified the values in the ngAfterViewInit using the component references from the ContentChildren.

Hope it helps. Feel free to update the code if any better approach is there.