Pass property between components

pass property from parent component to child component using emberjs example

Welcome @ahmed! That’s a pretty general question, but the basics are also really simple. Passing state from any context (route template, parent component, etc) works the same way. Currently there are two different “component invocation” syntaxes (classic and angle-bracket) and both should work in any version of Ember newer than 3.6. Classic will work in anything older. Angle Bracket is preferred going forward.

Classic:

{{some-component someProperty=this.parentProperty}}

Angle Bracket:

<SomeComponent @someProperty={{this.parentProperty}} />

Both of these examples are effectively the same. They both invoke the child component “some-component” with a property argument “someProperty”, and pass the parent’s “parentProperty” AS “someProperty”. So the parent context property is called “parentProperty” and the child refers to that same property as “someProperty”. You can also call them the same thing though:

<SomeComponent @parentProperty={{this.parentProperty}} />

In this case the child could also reference “this.parentProperty”. The important thing is that the name you give the property when you invoke the child component is the name within that child.

Anyway hope that helps answer your question, if you have any more specific questions let us know!