Daily Archives: June 14, 2021

Ways of passing data between components and html

Posted on by

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

.
.
<input type="text" id="name" class="form-control" #ingName>
.

test.component.ts

export class ShoppingEditComponent implements OnInit 
{
  @ViewChild('ingName') strNameOfIngredient: ElementRef;
  
  ngOnInit(): void 
  {
    console.log(this.strNameOfIngredient.nativeElement.value);
  }
}