2

I'm newbie in Angular but I believe this is a way to pass data between components in Angular using @Input :

In parent component :

...
<app-child [childMessage]="parentMessage"></app-child>
...

In child component :

...
@Input() childMessage: string;
...

But in my case,

I can't call my component selector that I want to pass.

And how do I pass the data ?

Ps : What I mean "Call" is doing this --> <app-child></app-child>

alramdein
  • 810
  • 2
  • 12
  • 26
  • your assumption about `@Input`is correct, but I don't get why you can't use the child element selector. Is it because they are not structured in a parent-child structure ?Could you describe a bit more your use case ? And what's the error you get if any ? – ylerjen Aug 21 '19 at 15:37

2 Answers2

2

You can have a shared service between these two components and then set a variable in shared service from parent component and use it in child or you can add getter and setter functions in service

Barkha
  • 702
  • 3
  • 8
  • For you guys that probably have the same problem, for me [this](https://www.dotnetcurry.com/angularjs/1445/angular-services-component-communication) is a good reference to implement communication between components with service in angular. – alramdein Aug 21 '19 at 17:10
1

You are trying to pass in a component value with how you have it structured which i'm guessing doesn't exist. Either use the following to pass in the string.

<app-child [childMessage]="'parentMessage'"></app-child>

Or in your parent declare the variable you are trying to pass in like so.

public parentMessage = "parentMessage";

I think this is the problem as the syntax looks correct.

If you are having trouble with rendering the component with its selector like so <app-child></app-child> have a look at this stackblitz from the Angular docs as examples of can be found here of that usage.

This would be likely be fixed by having declarations in your modules set up correctly.

devDan
  • 5,969
  • 3
  • 21
  • 40