George Edwards George Edwards - 1 year ago 111
AngularJS Question

Angular 2 Component in a component not displaying?

I am building a mobile app using Angular 2 and Nativescript. My Current setup has my

, which contains a
. The
renders and works fine, however, I now want to abstract out each of the four buttons in the dock, so I have created a
and tried to include that in my DockComponent, but it isn't displaying, see below - what have I done wrong?

I thought that by referencing the components selector and importing the component and adding it to the providers array of the parent component, that it would work?


import {Component, OnInit} from "@angular/core";
import {Login} from "../Login/login.component";

selector: "dock",
templateUrl: `Components/Dock/dock.html`,
styleUrls: ["Components/Dock/dock.css"],
providers: [Login]

export class Dock implements OnInit {



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

selector: "login",
templateUrl: `Components/Dock/Login/login.html`,
styleUrls: ["Components/Dock/Login/login.css"],
providers: []

export class Login implements OnInit {

page: Page;
ngOnInit() { = <Page>topmost().currentPage;


<FAB row="8" col="0" icon="res://help" class="fab-button help" rippleColor="#f1f1f1" (tap)="fabTap()"></FAB>
<FAB row="8" col="1" class="fab-button bluetooth" icon="res://bluetoothg" rippleColor="#f1f1f1" (tap)="fabTap()"></FAB>
<FAB row="8" col="3" icon="res://plus" class="fab-button" id="add" rippleColor="#f1f1f1" (tap)="bluetoothAdd()"></FAB>
<ActivityIndicator row="8" col="3" busy="{{ isScanning }}" id="ActivityIndicator"></ActivityIndicator>


(this is coped and pasted from where
now is in the dock.html file - where it worked fine)

<FAB row="8" col="2" icon="res://facebook" class="fab-button" id="facebook" rippleColor="#f1f1f1" (tap)="login('Facebook')"></FAB>
<FAB row="8" col="2" icon="res://google" class="fab-button" id="google" rippleColor="#f1f1f1" (tap)="login('Google')"></FAB>
<FAB row="8" col="2" icon="res://amazon" class="fab-button" id="amazon" rippleColor="#f1f1f1" (tap)="login('amazon')"></FAB>
<FAB row="8" col="2" icon="res://key" class="fab-button login" rippleColor="#f1f1f1" (tap)="socialClick()"></FAB>

Answer Source

Try changing:

providers: [Login]


directives: [Login]
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download