{"id":4376,"date":"2021-06-17T14:35:08","date_gmt":"2021-06-17T14:35:08","guid":{"rendered":"https:\/\/codethataint.com\/blog\/?p=4376"},"modified":"2021-06-17T15:09:57","modified_gmt":"2021-06-17T15:09:57","slug":"using-services-for-passing-data-between-components","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/using-services-for-passing-data-between-components\/","title":{"rendered":"Using Services for Passing data between Components"},"content":{"rendered":"

To pass data between components at the same level under parent, I.E. passing data between two children within the same parent we use @Input and @Output and pass the value through the tags. <\/p>\n

The Other option is using EventEmitter as variable in Service and emitting value from component1 and getting value in component2.<\/p>\n

    \n
  1. In the below code we are passing data from list-person.component.ts<\/em> to add-person.component.ts<\/em><\/li>\n
  2. We are calling instance of personcrudService to call a function which emits event which is received by ListPersonComponent OnInit() method<\/li>\n
  3. In add-person.component.ts we subscribe to the event by using instance of personcrudService<\/li>\n<\/ol>\n

    personcrud.service.ts<\/strong><\/p>\n

    \r\nimport {EventEmitter, Injectable, OnInit} from '@angular\/core';\r\nimport {LoggingServiceService} from '.\/logging-service.service';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class PersoncrudService{  \r\n  statusUpdated: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n  constructor(public loggingServiceService: LoggingServiceService) {}\r\n\r\n  updatePerson(id: number, status: boolean){\r\n    .\r\n    . \r\n    this.statusUpdated.emit(this.arrPersons[id].name);\r\n    .\r\n    .\r\n  }\r\n}\r\n<\/pre>\n
    list-person.component.ts<\/strong><\/p>\n
    \r\n@Component({\r\n  selector: 'app-list-person',\r\n  templateUrl: '.\/list-person.component.html',\r\n  styleUrls: ['.\/list-person.component.css'],\r\n  providers: [LoggingServiceService]\r\n})\r\nexport class ListPersonComponent implements OnInit {\r\n  constructor(private personcrudService: PersoncrudService,\r\n              private loggingServiceService: LoggingServiceService) { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n\r\n  updateStatus(i, status){\r\n    this.personcrudService.updatePerson(i, status);\r\n    this.loggingServiceService.logStatusOfPerson(status);\r\n  }\r\n}\r\n<\/pre>\n
    add-person.component.ts<\/strong><\/p>\n
    \r\n@Component({\r\n  selector: 'app-add-person',\r\n  templateUrl: '.\/add-person.component.html',\r\n  styleUrls: ['.\/add-person.component.css']\r\n})\r\nexport class AddPersonComponent implements OnInit {\r\n  constructor(private personcrudService: PersoncrudService) {\r\n  }\r\n\r\n  ngOnInit(): void {\r\n    this.personcrudService.statusUpdated.subscribe(\r\n      (name: string) => alert(name + ' has been updates')\r\n    );\r\n  }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
    To pass data between components at the same level under parent, I.E. passing data between two children within the same parent we use @Input and @Output and pass the value through the tags. The Other option is using EventEmitter as variable in Service and emitting value from component1 and getting value in component2. In the… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[301],"tags":[],"class_list":["post-4376","post","type-post","status-publish","format-standard","hentry","category-services"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/comments?post=4376"}],"version-history":[{"count":4,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4376\/revisions"}],"predecessor-version":[{"id":4380,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4376\/revisions\/4380"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=4376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=4376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=4376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}