I Managing UI references across ng2 components in nativescript

Question

I am building a nativescript mobile app, with Angular 2. I have a "page" component, which includes a "section" component which includes a "button" component. I used to just have one component but am breaking it all down however, the button has a click Handler which triggers an animation, the function called goes like this:

export function socialAnimate(page, clicked) {
    var google = page.getViewById("google");
}

where the button component calls it like:

@Component({
    selector: "button",
    template: `<Button row="8" col="2" icon="res://key" class="login" rippleColor="#f1f1f1" (tap)="socialClick()"></Button>`,
    styleUrls: ["Components/Button/login.css"],
    directives: []
})
export class Button implements OnInit {

    page: Page;

    loginClicked: boolean = false;

    ngOnInit() {
        this.page = <Page>topmost().currentPage;
    }
    socialClick() {
        this.loginClicked = socialAnimate(this.page, this.loginClicked);
    }
}

However, having refactored the code to produce these child components, I am getting an error:

TypeError: Cannot read property 'style' of undefined

I have been through with a debugger, page is defined, but none of the getiewById's are working, I presume I am getting the wrong page? but why is the topmost() not working, or is something else likely wrong?

Update:

I have also tried this approach:

export class PageCmp {
    page: Page;
    ngOnInit() {
        this.page = <Page>topmost().currentPage;
        this.page.actionBarHidden = true;
    }
    @ViewChild(Button) child: Button;

    ngAfterViewInit() {
        this.child.setPage(this.page);
    }
}

and then in my button component I added the function:

setPage(page: Page) {
    this.page = page;
}

EDIT:

So I now have this Button Component:

import {Component, ViewChild, ElementRef} from "@angular/core";

@Component({
    selector: "button",
    template: `<FAB row="8" col="2" icon="res://google" class="fab-button" id="google" rippleColor="#f1f1f1" (tap)="login('Google')"></FAB>`,
    directives: []
})
export class Button {

    @ViewChild('google') google: ElementRef;

    socialClick() {

        if (this.loginClicked == false) {
            this.google.nativeElement.style.opacity = 1;
        }

        this.loginClicked = !this.loginClicked;

    }
}

However, @ViewChild('google') google: ElementRef; and as such I am getting an error:

TypeError: Cannot read property 'nativeElement' of undefined

What happens with the updated approach? Does have this.child some value in ngAfterViewInit(). Can you console.log(this.child) there or debug by other means? — Günter Zöchbauer
If you want to query the <FAB element this way it needs to have a template variable like <FAB #google row="8" ... — Günter Zöchbauer

JoshSommer JoshSommer · Accepted Answer · 2016-06-08T12:44:55

To use View child you need to first import ElmentRef from core

import {ElementRef} from "@angular/core";

All of your @ViewChild need to be of the type ElmentRef, then to access the actual elment you need to use nativeElement

@ViewChild('login') child: ElementRef;

ngAfterViewInit() {
    let view = this.child.nativeElement;
}

hope that helps

I Managing UI references across ng2 components in nativescript

Update:

EDIT:

1 Answers