Nativescript-angular: Child component not reference in Component

[NickIliev]

_From @AbbeYassine on February 9, 2017 20:4_

I'm using NativeScript 2.5 , I have an issue when I reference a component like that

 <template tabItem
                      iconSource="~/assets/images/main/coupon.png">
                <StackLayout>
                    <coupon-component #cmpCoupon></coupon-component>
                </StackLayout>
            </template>

In CouponComponent :

```
@ViewChild("cmpCoupon") couponComponent:CouponComponent;

ngOnInit() {

    this.couponComponent.callback = {
        onShowPopup(){
            layout.backgroundColor = "#50000000";
        },
        onHidePopup(){
            layout.backgroundColor = "#edf0f5";
        }
    }
}

```

He tell me callback is undefined , any help please
NB : I must declare in template because I'm working with tabView , It work perfectly if I'm not using with <template>

_Copied from original issue: NativeScript/NativeScript#3624_

[tsonevn]

Hi @AbbeYassine,
Could you provide some more info about what you are trying to achieve?

While using TabView component in NativeScript Angular 2 project you should use some of the available Layouts in NativeScript. For example StackLayout. For further info, you could review the sample project here.

HTML

<TabView #tabview [selectedIndex]="tabindex" sdkExampleTitle sdkToggleNavButton>
    <StackLayout *tabItem="{title: 'NativeScript'}">
        <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
        <ScrollView>
            <Label [text]="content" textWrap="true" class="m-15"></Label>
        </ScrollView>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Icon'}">
        <Image class="m-t-30 m-b-15" src="res://icon" width="80" height="80"></Image>
        <Label text="NativeScript" textWrap="true" class="h2 m-x-auto" color="blue"></Label>
    </StackLayout>
</TabView>

Hope this helps.

[hdeshev]

View children will be available after the ngAfterViewInit callback is executed. You should not use ngOnInit for that.

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html