What is the react way of passing directives/Inputs to child in angular?

Question

In react, you can simply write this:

<component {...props} />

to pass attributes from parent to child. I know in angular you can use @Input to receive and pass data but how would you handle a dynamic list of directives to pass down to a child element? Just to illustrate the situation:

<custom-button [color]="color" [x]="some value" [y]="some other val"/>

And your custom button shall pass all those inputs to the wrapped button element in custom-button component.

In Angular, you don't. Related: https://stackoverflow.com/q/38122124/3001761. — jonrsharpe, Jun 21 '18 at 20:29
So how do you compose components without repeating every single API that the child component might have? — Adam Boostani, Jun 21 '18 at 20:32
Again, you don't. React and Angular are two very different things with different goals and philosophies. — jonrsharpe, Jun 21 '18 at 20:35
@jonrsharpe I understand the restrictions of data types in Angular. But I would investigate this farther as I think passing vars around is such elemental aspect of any slightly complex software system and there should be a way for it in Angular. — Adam Boostani, Jun 21 '18 at 21:06

score 0 · Answer 1 · answered Jun 21 '18 at 20:48

You could do this a couple of ways. For example, you could have a service, say SharedComponentXStateService, that shares state values among the parent and child.

A method closer to the React functionality would be to have a context variable that contains all of the variables that are shared between the parent and child. Create an input on the child that accepts it, and pass the value from the parent.

/** context interface */
export interface IComponentXContext {
  color: string;
  x: string;
  y: string;
}

/** parent component */
@Component({
  template: <custom-button context="context" />
})
export class ParentXComponent {
  context: IComponentXContext = { color: 'red', x: 'x', y: 'y' }
}

/** child component */
@Component({
  selector: 'custom-button'
})
export class CustomButtonComponent {
  @Input()
  context: IComponentXContext;
}

I see how this works with input, but not with directive – roberto tomás Jun 13 '19 at 20:15 — roberto tomás, Jun 13 '19 at 20:15

What is the react way of passing directives/Inputs to child in angular?

1 Answers1