How to import a Angular Component with own module?

Question

EDIT:

:facepalm: Found the error...

<div *ngFor="let contact of contacts">
   <app-contact-element [contact]="contact"></app-contact-element>
</div>

contacts.length == 0

---

I want to import a custom component (contact.component) with own module into my other component (event-info.component). I don't know how to configure the modules...

Here is my solution so far. There are no errors, but the component is not visible. I also added address.component (without module) to event-info. This works.

• event
  • event.module
    • event-info.component
    • event-other.component
• contact
  • contact.module
  • contact.component
• address
  • address.component

---

event.module

@NgModule({
  imports: [
    ContactModule
  ],
  declarations: [
    EventInfoComponent,
    AddressComponent
  ],
  bootstrap: []
})
export class EventModule {}

event-info.component.html

<app-contact-element [contact]="contact"></app-contact-element>
<app-address-element [address]="address"></app-address-element>

---

contact.module

@NgModule({
  imports: [
    AvatarModule
  ],
  declarations: [
    ContactComponent
  ],
  exports: [
    ContactComponent
  ]
})
export class ContactModule {}

contact and address.component are very simple and have only a text in html and an @Input() contact; with ngOnInit log of input value in component.

There is a log output from address but not from contact