{"id":1445,"date":"2021-11-29T14:52:21","date_gmt":"2021-11-29T13:52:21","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1445"},"modified":"2022-06-08T17:53:40","modified_gmt":"2022-06-08T15:53:40","slug":"how-to-emit-an-event-from-parent-to-child-component","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/11\/29\/how-to-emit-an-event-from-parent-to-child-component\/","title":{"rendered":"How to emit an event from parent to child component?"},"content":{"rendered":"\n<p>Usually we use&nbsp;<code>@Output()  and EventEmitter (from Angular\/core) <\/code>&nbsp;to emit an event to parent component.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Output() addTab = new EventEmitter&lt;any&gt;();\n...\n\/\/then \naddTab.emit(); <\/code><\/pre>\n\n\n\n<p><em>&nbsp;How should we  proceed in the reverse order? <span class=\"has-inline-color has-vivid-red-color\">from parent to child<\/span>?<\/em><\/p>\n\n\n\n<p>Using&nbsp;<em>RxJs<\/em>, you can declare a&nbsp;<code>Subject<\/code>&nbsp;in your parent component and pass it as&nbsp;<code>Observable<\/code>&nbsp;to child component, child component just need to subscribe to this&nbsp;<code>Observable<\/code>.<\/p>\n\n\n\n<h5><strong>Parent-Component<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>eventsSubject: Subject&lt;void&gt; = new Subject&lt;void&gt;();\n\nemitEventToChild() {\n  this.eventsSubject.next();\n}<\/code><\/pre>\n\n\n\n<h5><strong>Parent-HTML<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;child &#91;events]=\"eventsSubject.asObservable()\"&gt; &lt;\/child&gt; <\/code><\/pre>\n\n\n\n<h5><strong>Child-Component<\/strong><\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>private eventsSubscription: Subscription;\n\n@Input() events: Observable&lt;void&gt;;\n\nngOnInit(){\n  this.eventsSubscription = this.events.subscribe(() =&gt; doSomething());\n}\n\nngOnDestroy() {\n  this.eventsSubscription.unsubscribe();\n}<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><strong><em>PS:<span class=\"has-inline-color has-vivid-cyan-blue-color\"> Converting eventsSubject to an Observable, prevent the child-component to call next().&nbsp;<\/span><\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Usually we use&nbsp;@Output() and EventEmitter (from Angular\/core) &nbsp;to emit an event to parent component. &nbsp;How should we proceed in the reverse order? from parent to child? Using&nbsp;RxJs, you can declare a&nbsp;Subject&nbsp;in your parent component and pass it as&nbsp;Observable&nbsp;to child component, child component just need to subscribe to this&nbsp;Observable. Parent-Component Parent-HTML Child-Component PS: Converting eventsSubject to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[402,292,405,326,401,403,404],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1445"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1445"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1445\/revisions"}],"predecessor-version":[{"id":1967,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1445\/revisions\/1967"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}