I'm currently developing a mobile app with Angular 2 and Nativescript. In my setup, I have the HomeComponent, which includes a DockComponent. The DockComponent is functioning correctly, but now I want to break down the four buttons in the dock into separate components. To achieve this, I created a LoginComponent and attempted to include it in the DockComponent. However, it's not showing up as expected. Can you help me figure out what I did wrong?
I believed that by referencing the component's selector, importing the component, and adding it to the providers array of the parent component, it would work properly. What am I missing here?
Dock.Component.ts:
import {Component, OnInit} from "@angular/core";
import {Login} from "../Login/login.component";
@Component({
selector: "dock",
templateUrl: `Components/Dock/dock.html`,
styleUrls: ["Components/Dock/dock.css"],
providers: [Login]
})
export class Dock implements OnInit {
}
Login.Component.ts:
import {Component, OnInit} from "@angular/core";
@Component({
selector: "login",
templateUrl: `Components/Dock/Login/login.html`,
styleUrls: ["Components/Dock/Login/login.css"],
providers: []
})
export class Login implements OnInit {
page: Page;
ngOnInit() {
this.page = <Page>topmost().currentPage;
}
}
Dock.html:
<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>
<login></login>
<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>
login.html:
(this content is copied and pasted from where <login></login> currently is in the dock.html file - where it was previously working 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>