{"id":4339,"date":"2021-06-14T05:32:36","date_gmt":"2021-06-14T05:32:36","guid":{"rendered":"https:\/\/codethataint.com\/blog\/?p=4339"},"modified":"2021-06-14T05:51:35","modified_gmt":"2021-06-14T05:51:35","slug":"ways-of-passing-data-between-components-and-html","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/ways-of-passing-data-between-components-and-html\/","title":{"rendered":"Ways of passing data between components and html"},"content":{"rendered":"<p><strong>5 ways of passing data between html and components<\/strong><\/p>\n<table>\n<tr>\n<td>1<\/td>\n<td>Parent<\/td>\n<td>Child<\/td>\n<td>@Input<\/td>\n<\/tr>\n<tr>\n<td>2<\/td>\n<td>Child<\/td>\n<td>Parent<\/td>\n<td>@Output<\/td>\n<\/tr>\n<tr>\n<td>3<\/td>\n<td>HTML Form<\/td>\n<td>Component<\/td>\n<td>Using @Viewchild and ElemRef<\/td>\n<\/tr>\n<tr>\n<td>4<\/td>\n<td>HTML Form<\/td>\n<td>Component<\/td>\n<td>@ng-content and @ContentChild<\/td>\n<\/tr>\n<tr>\n<td>5<\/td>\n<td>HTML Form<\/td>\n<td>Component<\/td>\n<td>[(ngModel)]<\/td>\n<\/tr>\n<\/table>\n<p><strong class=\"ctaHeader3\">3.@Viewchild and ElemRef<\/strong><br \/>\n<strong>test.component.html<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n.\r\n.\r\n&lt;input type=&quot;text&quot; id=&quot;name&quot; class=&quot;form-control&quot; #ingName&gt;\r\n.\r\n<\/pre>\n<p><strong>test.component.ts<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nexport class ShoppingEditComponent implements OnInit \r\n{\r\n  @ViewChild('ingName') strNameOfIngredient: ElementRef;\r\n  \r\n  ngOnInit(): void \r\n  {\r\n    console.log(this.strNameOfIngredient.nativeElement.value);\r\n  }\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>5 ways of passing data between html and components 1 Parent Child @Input 2 Child Parent @Output 3 HTML Form Component Using @Viewchild and ElemRef 4 HTML Form Component @ng-content and @ContentChild 5 HTML Form Component [(ngModel)] 3.@Viewchild and ElemRef test.component.html . . &lt;input type=&quot;text&quot; id=&quot;name&quot; class=&quot;form-control&quot; #ingName&gt; . test.component.ts export class ShoppingEditComponent implements OnInit&hellip; <a href=\"https:\/\/codethataint.com\/blog\/ways-of-passing-data-between-components-and-html\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/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":[334],"tags":[],"class_list":["post-4339","post","type-post","status-publish","format-standard","hentry","category-components-and-databinding"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4339","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=4339"}],"version-history":[{"count":5,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4339\/revisions"}],"predecessor-version":[{"id":4345,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/4339\/revisions\/4345"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=4339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=4339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=4339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}