With Angular, the component objects are automatically created and associated with their corresponding elements in the template.<\/p>\n
This raises the question then \u2013 if you want to refer to a child object from a parent component, how do you do it? There may be multiple child components of the same time in the parent component, so how do you get a reference to a specific one?<\/p>\n
As a contrast, when using JSF for example to refer to child component code, the parent managed bean (= component object in Angular) is actually responsible for declaring the managed bean objects for its children. On the page, the child component element will typically have a specific e.g. controller attribute where the managed bean for that child is passed in, e.g. as <child controller=#{controller.child}>\u2026<\/em> where controller.child<\/em> refers to the child property of the parent managed bean. In this way, unlike Angular, the object hierarchy is explicitly declared in the code.<\/p>\n In Angular, there are a number of ways to do this, but in the end they all come down to using reference information from a particular template element to direct which object is required.<\/p>\n It is instructive to read the whole section on <\/strong><\/em>Angular template syntax<\/strong><\/em><\/a> in the Angular docs, which includes all the binding techniques.<\/strong><\/em><\/p>\n 1\/ Passing an element reference in a method call from the template<\/p>\n In this case, (itemSelected)="onItemClicked($event, locationSearch)" <\/em>is passing the element reference #locationSearch as the second argument to onItemClicked. This passes the reference to the component object for <ion-auto-complete>. (Note that in this case the first argument, $event, is the actual location object that was clicked in an autocomplete list).<\/p>\n 2\/ Using the @ViewChild<\/a> decorator in the parent class, passing it a child reference used in the template<\/p>\n In this case, the component only contains a single searchbar, so using a class reference is not ambiguous. If there were multiples, the first one would be taken. You can inject references to multiple children via @ViewChildren<\/a> if there is more than one present \u2013 this gives you access to an array of them. <\/p>\n Where you want to use a reference to a specific element, you can use @ViewChild with an element reference, e.g. in 1\/ above you would use #locationSearch to inject a referent to the <ion-auto-complete #locationSearch > element as follows:-<\/p>\n 3\/ Another related technique is to make a method call in the template e.g. in an event call, using an element reference to another element in the component. This is detailed here<\/a>. Note that <child-component #f<\/em> contains the #f element reference, and the inc()<\/em> method on the #f<\/em> element is called from the button click event using <button (click)=\u201df.inc()\u201d><\/em><\/p>\n\n
<ion-auto-complete id="location-search" #locationSearch [dataProvider]="locationsAutoCompleteService"
(itemSelected)="onItemClicked($event, locationSearch)"><\/ion-auto-complete><\/pre>\n<\/blockquote>\n\n
export class AutoCompleteComponent {
@Input() public dataProvider: any;
@Output() public itemSelected: EventEmitter<any>;
@ViewChild(Searchbar) searchBar: Searchbar;<\/pre>\n<\/blockquote>\n\n
@ViewChild(\u2018#locationSearch\u2019) searchBar: Searchbar;<\/pre>\n<\/blockquote>\n
\n
@Component({\n selector: 'child-component',\n inputs: ['bar'],\n template: `"{{ bar }}" in child, counter {{ n }}`\n})\nclass ChildComponent{\n constructor () {\n this.n = 0;\n }\n inc () {\n this.n++;\n }\n}\n\n@Component({\n selector: 'my-app',\n template: `\n <child-component #f [bar]="bar"><\/child-component><br>\n <button (click)="f.inc()">call child func<\/button>\n <button (click)="bar = 'different'">change parent var<\/button>\n `,\n directives: [ChildComponent]\n})\nclass AppComponent {\n constructor () {\n this.bar = 'parent var';\n }\n}\n\nbootstrap(AppComponent); <\/code><\/pre>\n<\/blockquote>\n