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);
}
}