{"id":684,"date":"2023-11-07T10:07:25","date_gmt":"2023-11-07T16:07:25","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=684"},"modified":"2023-11-07T10:07:25","modified_gmt":"2023-11-07T16:07:25","slug":"output-quick-example-in-angular","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/output-quick-example-in-angular\/","title":{"rendered":"@Output() quick example in angular"},"content":{"rendered":"\n

In Angular is possible to pass data from a child component to a parent component using the @Output<\/code> decorator and an EventEmitter, like this:<\/p>\n\n\n\n

    \n
  1. Child Component (Sender)<\/strong>: In the child component, define an @<\/code>Output<\/code> <\/strong>property with an EventEmitter<\/code>. <\/li>\n\n\n\n
  2. This property will emit an event containing the data you want to pass to the parent component.<\/li>\n<\/ol>\n\n\n\n
    <\/div>
    <\/div>
    <\/div><\/div>
    Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div><\/div>
       import { Component, EventEmitter, Output } from '@angular\/core';\n\n   @Component({\n     selector: 'app-child',\n     template: `\n       <button (click)=\"sendData()\">Send Data to Parent<\/button>\n     `,\n   })\n   export class ChildComponent {\n     @Output() dataEvent = new EventEmitter<string>();\n\n     sendData() {\n       const dataToSend = 'Data from Child';\n       this.dataEvent.emit(dataToSend);\n     }\n   }<\/code><\/pre><\/div><\/div>\n\n\n\n
      \n
    1. Parent Component (Receiver)<\/strong>: \n