{"id":1031,"date":"2024-05-09T13:57:06","date_gmt":"2024-05-09T16:57:06","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1031"},"modified":"2024-05-09T13:59:15","modified_gmt":"2024-05-09T16:59:15","slug":"compartilhando-dados-entre-componente-pai-e-filho-no-angular","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1031","title":{"rendered":"Compartilhando Dados entre Componente Pai e Filho no Angular"},"content":{"rendered":"\n<p>Quando desenvolvemos aplicativos Angular, frequentemente nos deparamos com a necessidade de compartilhar dados entre componentes pai e filho. Isso \u00e9 essencial para criar uma aplica\u00e7\u00e3o din\u00e2mica e interativa. Felizmente, o Angular oferece v\u00e1rias maneiras de realizar essa comunica\u00e7\u00e3o de forma eficaz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introdu\u00e7\u00e3o aos Componentes Pai e Filho<\/h2>\n\n\n\n<p>Em Angular, os componentes s\u00e3o os blocos de constru\u00e7\u00e3o fundamentais de uma aplica\u00e7\u00e3o. Um componente pai pode conter v\u00e1rios componentes filhos, formando uma hierarquia de componentes. A comunica\u00e7\u00e3o entre eles \u00e9 vital para a intera\u00e7\u00e3o e funcionamento correto do aplicativo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Passando Dados do Pai para o Filho<\/h2>\n\n\n\n<p>A maneira mais comum de compartilhar dados de um componente pai para um filho \u00e9 atrav\u00e9s da passagem de dados por propriedades. No componente pai, voc\u00ea pode definir uma propriedade e vincul\u00e1-la ao componente filho usando o decorator @Input.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"493\" height=\"293\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-6.png\" alt=\"\" class=\"wp-image-1032\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-6.png 493w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-6-300x178.png 300w\" sizes=\"(max-width: 493px) 100vw, 493px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"444\" height=\"319\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-7.png\" alt=\"\" class=\"wp-image-1033\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-7.png 444w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-7-300x216.png 300w\" sizes=\"(max-width: 444px) 100vw, 444px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Dessa forma, o componente filho recebe os dados do componente pai e pode us\u00e1-los conforme necess\u00e1rio.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Emitindo Eventos do Filho para o Pai<\/h2>\n\n\n\n<p>l\u00e9m de passar dados do pai para o filho, muitas vezes precisamos comunicar eventos do filho para o pai. Isso pode ser feito atrav\u00e9s da emiss\u00e3o de eventos e manipula\u00e7\u00e3o deles no componente pai.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"399\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-8.png\" alt=\"\" class=\"wp-image-1034\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-8.png 584w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-8-300x205.png 300w\" sizes=\"(max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"350\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-9.png\" alt=\"\" class=\"wp-image-1035\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-9.png 561w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/05\/image-9-300x187.png 300w\" sizes=\"(max-width: 561px) 100vw, 561px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Neste exemplo, o componente filho emite um evento quando o bot\u00e3o \u00e9 clicado, e o componente pai escuta esse evento e executa a fun\u00e7\u00e3o lidarComEvento().<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Compartilhar dados entre componentes pai e filho \u00e9 uma parte essencial do desenvolvimento de aplicativos Angular. Atrav\u00e9s da passagem de dados por propriedades, emiss\u00e3o de eventos e o uso de servi\u00e7os, podemos criar uma comunica\u00e7\u00e3o eficaz e manter nossos aplicativos organizados e escal\u00e1veis.<\/p>\n\n\n\n<p>Ao entender essas t\u00e9cnicas e escolher a abordagem adequada para cada situa\u00e7\u00e3o, podemos desenvolver aplicativos Angular mais robustos e f\u00e1ceis de manter. Experimente essas t\u00e9cnicas em seus pr\u00f3prios projetos e descubra como elas podem melhorar a qualidade e a usabilidade de suas aplica\u00e7\u00f5es.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando desenvolvemos aplicativos Angular, frequentemente nos deparamos com a necessidade de compartilhar dados entre componentes pai e filho. Isso \u00e9 essencial para criar uma aplica\u00e7\u00e3o din\u00e2mica e interativa. Felizmente, o Angular oferece v\u00e1rias maneiras de realizar essa comunica\u00e7\u00e3o de forma eficaz. Introdu\u00e7\u00e3o aos Componentes Pai e Filho Em Angular, os componentes s\u00e3o os blocos de constru\u00e7\u00e3o fundamentais de uma aplica\u00e7\u00e3o. Um componente pai pode conter v\u00e1rios componentes filhos, formando uma hierarquia de componentes. A comunica\u00e7\u00e3o entre eles \u00e9 vital para a intera\u00e7\u00e3o e funcionamento correto do aplicativo. Passando Dados do Pai para o Filho A maneira mais comum de compartilhar dados de um componente pai para um filho \u00e9 atrav\u00e9s da passagem de dados por propriedades. No componente pai, voc\u00ea pode definir uma propriedade e vincul\u00e1-la ao componente filho usando o decorator @Input. Dessa forma, o componente filho recebe os dados do componente pai e pode us\u00e1-los conforme necess\u00e1rio. Emitindo Eventos do Filho para o Pai l\u00e9m de passar dados do pai para o filho, muitas vezes precisamos comunicar eventos do filho para o pai. Isso pode ser feito atrav\u00e9s da emiss\u00e3o de eventos e manipula\u00e7\u00e3o deles no componente pai. Neste exemplo, o componente filho emite um evento quando o bot\u00e3o \u00e9 clicado, e o componente pai escuta esse evento e executa a fun\u00e7\u00e3o lidarComEvento(). Conclus\u00e3o Compartilhar dados entre componentes pai e filho \u00e9 uma parte essencial do desenvolvimento de aplicativos Angular. Atrav\u00e9s da passagem de dados por propriedades, emiss\u00e3o de eventos e o uso de servi\u00e7os, podemos criar uma comunica\u00e7\u00e3o eficaz e manter nossos aplicativos organizados e escal\u00e1veis. Ao entender essas t\u00e9cnicas e escolher a abordagem adequada para cada situa\u00e7\u00e3o, podemos desenvolver aplicativos Angular mais robustos e f\u00e1ceis de manter. Experimente essas t\u00e9cnicas em seus pr\u00f3prios projetos e descubra como elas podem melhorar a qualidade e a usabilidade de suas aplica\u00e7\u00f5es.<\/p>\n","protected":false},"author":1,"featured_media":1037,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1031"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1031"}],"version-history":[{"count":3,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1031\/revisions"}],"predecessor-version":[{"id":1039,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/1031\/revisions\/1039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/1037"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}