Jhipster 4 How to put entity component (list) on home screen

Question

I'm using Jhipster 4 with Angular 2.0 to create application. I'm newbie for all this staff.

Let's say I have two entities: Customer and Task with relation one to many.

I would like to have list of customers (top 10) on home screen. As next I would like to add on customer detail view list of all tasks which belongs to him.

I've updated home.component.ts to add CustomerComponent

import { Component, OnInit } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { EventManager, JhiLanguageService } from 'ng-jhipster';

import { Account, LoginModalService, Principal } from '../shared';

import { CustomerComponent, CustomerService, Customer } from '../entities/customer/';  // <---

@Component({
    selector: 'jhi-home',
    templateUrl: './home.component.html',
    styleUrls: [
        'home.css'
    ],
    entryComponents: [
      CustomerComponent    // <---
    ],

})
export class HomeComponent implements OnInit {
    account: Account;
    modalRef: NgbModalRef;

    constructor(
        private jhiLanguageService: JhiLanguageService,
        private principal: Principal,
        private loginModalService: LoginModalService,
        private eventManager: EventManager
    ) {
        this.jhiLanguageService.setLocations(['home']);
    }

    ngOnInit() {
        this.principal.identity().then(
          (account) => {
            this.account = account;
        });
        this.registerAuthenticationSuccess();
    }

    registerAuthenticationSuccess() {
        this.eventManager.subscribe('authenticationSuccess', (message) => {
            this.principal.identity().then((account) => {
                this.account = account;
            });
        });
    }

    isAuthenticated() {
        return this.principal.isAuthenticated();
    }

    login() {
        this.modalRef = this.loginModalService.open();
    }
}

And in home.component.html I added jhi-customer

<div class="row">
    <div class="col-md-3">
        <span class="hipster img-fluid img-rounded"></span>
    </div>
    <div class="col-md-9">
        <h1 class="display-4" jhiTranslate="home.title">Welcome, Java Hipster!</h1>
        <p class="lead" jhiTranslate="home.subtitle">This is your homepage</p>

        <div [ngSwitch]="isAuthenticated()">
            <div class="alert alert-success" *ngSwitchCase="true">
                <span *ngIf="account" jhiTranslate="home.logged.message"
                    translateValues="{username: '{{account.login}}'}"> You are logged in as user "{{account.login}}". </span>
            </div>


            <div  *ngSwitchCase="true">
               <jhi-customer>Loading top 10 customers...</jhi-customer>
            </div>

        </div>
    </div>
</div>

After those changes I see only

Loading top 10 customers...

Could you please help find what I'm doing wrong? I thought that it will be enought if I add this component to home page.

Updated I asume I'm on the 3rd level of components; AppComponent, HomeComponent and CustomerComponent is 3rd Based on diagram from this Sample component hierarchy

Answer 1

What you're trying to accomplish with this code is rendering the component <jhi-customer> as a nested component of the home component (to list the top 10 customers you might require additional logic, depending on what "top" would mean).

You can do so by using the modules files and changing their visibility through exports/imports statements. The modules appeared in Angular RC6 and require you to define the accessibility rules between modules.

Suppose you have defined and generated the following JDL model:

entity Customer {
    name String required,
}

entity Task {
    name String required
}

relationship OneToMany {
    Customer{tasks} to Task{customer(name)}
}

Then you'll end up with:

• customer.module.ts
• entity.module.ts

In customer.module.ts, export CustomerComponent, as such:

@NgModule({
    imports: [
        JhipsterSharedModule,
        RouterModule.forRoot(ENTITY_STATES, { useHash: true })
    ],
    exports: [
        CustomerComponent
    ],
    declarations: [...],
    entryComponents: [...],
    providers: [...],
    schemas: [...]
})
export class JhipsterCustomerModule {}

In entity.module.ts, export the resulting module JhipsterCustomerModule:

@NgModule({
    imports: [
        JhipsterCustomerModule,
        JhipsterTaskModule
    ],
    exports: [
        JhipsterCustomerModule
    ],
    declarations: [],
    entryComponents: [],
    providers: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class JhipsterEntityModule {
}

as explained here

The last step is to import JhipsterEntityModule in home.module.ts:

@NgModule({
    imports: [
        JhipsterSharedModule,
        JhipsterEntityModule,
        RouterModule.forRoot([HOME_ROUTE], {useHash: true}),
    ],
    declarations: [
        HomeComponent
    ],
    entryComponents: [],
    bootstrap: [],
    providers: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class JhipsterHomeModule {
}

Then the component will be rendered appropriately. Here, I exported CustomerComponent and re-exported the full module but you might find a more precise scoping of imports/exports suitable for your needs.

If you're looking for the reference, have a look at NgModule section, which will take you to a step-by-step tutorial for dealing with the new Angular modules.

Answer 2

You have to register CustomerComponent in app/shared/shared.common.module.ts in declarations and exports sections. Placing it in other file did not work for me.

Here is a working description.

i.e

import { CustomComponent } from 'path/to/custom.component';

@NgModule({
    declarations: [
        ...
        QuillComponent,
    ],
    exports: [
        ...
        CustomComponent,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class YourJhiSharedModule {}

NOTE: YourJhiSharedModule generally follow you app naming, but is found at app/shared/shared.module.ts