Stack Overflow

1. Products

1.

Juan Choque
1
, 1 reputation

2. 1
3.
4.
5.
6.
1. Home
2.
1. PUBLIC
2. Stack Overflow
3. Tags
4. Users
5. Jobs
3.
1. TEAMS

What’s this?

2.
First 10 Free

Use @Output with <router-outlet> of

“angular 4.0”
Ask Question

Asked 2 years, 5 months ago

Active 1 year, 3 months ago
Viewed 2k times
4
1
Use a selector to succeed.

<app-child1 (onVoted)="onVoted($event)"></app-child1>
But using a router will fail

<router-outlet (onVoted)="onVoted($event)"></router-outlet>
I want to receive a value from a component displayed on the "router-outlet".

Please tell me what method I have.

 app：https://toparent.herokuapp.com/ src:https://github.com/kuniatsu/routerQuestion
<h1>
{{title}}
</h1>
<a href="c1">child1</a>
<router-outlet (onVoted)="onVoted($event)"></router-outlet><!--fail-->
<hr />
<app-child1 (onVoted)="onVoted($event)"></app-child1><!--success-->

angular angular-components

shareedit
edited May 5 '17 at 5:28
asked May 5 '17 at 4:29

くにあつ
14099 bronze badges
• 3
you cannot create @Output variable to angular packages. What you mean by this line "I want to receive a
value from a component displayed on the router." – Aravind May 5 '17 at 4:30
• 1
Use a service angular.io/docs/ts/latest/cookbook/… – eko May 5 '17 at 4:43
• 1
>>Mr.Aravind 「you cannot create @Output variable to angular packages.」
Why??? toparent.herokuapp.com Press the second displayed button.title is changed.@Output is
working normally.But only selectors.I hope you will be able to provide the information. – くにあつ May 5
'17 at 5:16
• 1
Possible duplicate of Angular 2 output from router-outlet – AJT82 May 6 '17 at 9:05
add a comment
1 Answer
active oldest votes

1
You can define an @Output event emitter in the component being rendered at router-outlet.
define router outlet as follows.

*.html
<router-outlet (activate)="onActivate($event)"></router-outlet>
In your component you can do as so.

onActivate(elementRef) {
elementRef.<the @Output eventEmitter>.subscribe(event => {
console.log(event);
});
}
 This way you can send the events to the component which is rendering router-outlet. This
works because @Output event emitters are event streams and you can subscribe to those
events.

https://angular.io/api/router/RouterOutlet
shareedit
answered Jul 11 '18 at 18:31

mruanova
2,52422 gold badges1818 silver badges3838 bronze badges
add a comment
Your Answer
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
• Links

• Images

• Styling/Headers

• Lists

• Blockquotes

• Code

• HTML
• advanced help »
Post Your Answer

Not the answer you're looking for? Browse other questions tagged angular angular-

components or ask your own question.

Blog
•

Coding Salaries in 2019: Updating the Stack Overflow Salary Calculator

•

IMHO: The Mythical Fullstack Engineer

Featured on Meta
•

Official FAQ on gender pronouns and Code of Conduct changes

•

I'm resigning as a Stack Overflow Community Elected Moderator

•

Yet another “step down as moderator” post

Remote jobs
•
Android/iOS Engineer
Codelitt, Inc.No office location
$45K - $80KREMOTE
androidios

•
DevOps Engineer
Cardinal Financial Company, LPNo office location
REMOTE
dockeramazon-web-services

•
Senior Android/Kotlin Developer (Remote)
X-TeamNo office location
REMOTE
androidionic-framework

•
React Native Engineer
Codelitt, Inc.No office location
$45K - $80KREMOTE
androidios

Linked

48
Angular 2 output from router-outlet

Related

8
Angular 2 how to pass variable from parent component to router outlet

494
What is the equivalent of ngShow and ngHide in Angular 2+?

5
angular 2 update app component from router outlet component

48
Angular 2 output from router-outlet

3
angular2 target specific router-outlet

0
Router Outlets Angular 2

0
Angular 4 router-outlet content

0
Angular router outlet automatically activating

0
 How to show ngx-loading animation only to router-outlet?

0
Angular component outside of router outlet

Hot Network Questions

▪ How should I add a bit of space below a substack in an overset?
▪ Antonym for “boilerplate” or “cookie-cutter”
▪ Why is more music written in sharp keys than flat keys?
▪ Can you identify this fighter aircraft?
▪ How do functional equations for zeta functions arise from the structure of a homology group?
▪ Why do microwaves use magnetron?
▪ "Du hast es gut", small talk meaning?
▪ apache httpd process be killed by kernel oom
▪ In Cura, can I make my top and bottom layer be all perimiters?
more hot questions

Question feed
https://stack

STACK OVERFLOW
• Questions
• Jobs
• Developer Jobs Directory
• Salary Calculator
• Help
• Mobile
• Disable Responsiveness
PRODUCTS
• Teams
• Talent
• Advertising
• Enterprise
COMPANY
• About
• Press
• Work Here
• Legal
• Privacy Policy
• Contact Us
STACK EXCHANGE
NETWORK
• Technology
• Life / Arts
• Culture / Recreation
• Science
• Other
• Blog
• Facebook
• Twitter
• LinkedIn
site design / logo © 2019 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0 with attribution
required. rev 2019.10.18.35213