CODEWITHSUNDEEP
angular
Gift
Gift

Reputation: 11

Advantage of using emitted output properties over viewchild in angular

//first approach importing the child component and accessing its properties 

import { childComponent}  from './childdetail.component';
@Component({
  selector: "testProject",
  templateUrl: "app/partials/Main.html"
})
export class AppComponent { 
  @ViewChild(childComponent) childDetail:childDetailComponent;
  this.getChildProperty(this.childDetail.shipment)

  getChildProperty(value) {
    console.log(value);
  }
}



//second approach include getChildProperty method in ts file
//child component will have an eventEmitter that emits shipment value
// view will look like below code

<child-component (shipmentValue)="getChildProperty($event)">

Which of the two is a better approach and why? I am confused as to which approach is best as I can achieve my end-goal with both. Any explanation will be greatly appreciated. Thanks in advance

Upvotes: 1

Views: 51

Answers (1)

kun
kun

Reputation: 4237

the linked article will give you some direction: https://blog.angular-university.io/angular-viewchild/

Most of time event emitters and the simple interaction between components are desired for readability and modularity of the code base. Use viewchild when you need to inject a reference to the component.

Upvotes: 1

Related Questions