0

I've been trying to improve my application - rather than being one monolithic application with everything declared in the app module - I wanted to move certain components into feature modules. However, in places where I had some data binding from one component - to another outside of the module this has broke the code.

ResultDetailsComponent Template

            <div class="col-9">
              <app-links-table [loaded]="dataLoaded" [dataLinkResult]="dataLinkResult"></app-links-table>
            </div>

The ResultDetailsComponent now belongs to the ItemsModule in which I declare and export it.

@NgModule({
  declarations: [
    ResultDetailsComponent,

  ],
  exports: [
    ResultDetailsComponent
  ]
})
export class ItemsModule { }

The LinksTableComponent (app-links-table) contains the correct inputs for the data binding

export class LinksTableComponent {

  @Input() loaded: boolean;
  @Input() dataLinkResult: Link[];

}

And this is, for the moment - still declared in the main AppModule, though I plan on moving it out into it's own feature module.

@NgModule({
  declarations: [
    LinksTableComponent,
  ],
  exports: [
    LinksTableComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Is the answer that I need to create a service now to communicate between these components? Or is something about my structure just fundamentally wrong?

JohnD91
  • 523
  • 1
  • 5
  • 16
  • I should have mentioned - at the moment I'm getting the following error compiler.js:2175 Uncaught Error: Template parse errors: Can't bind to 'loaded' since it isn't a known property of 'app-links-table'. – JohnD91 Feb 12 '20 at 12:04
  • My answer to a similar question here: https://stackoverflow.com/a/60157187/5367916. Does the idea of a shared module help you? – Kurt Hamilton Feb 12 '20 at 12:09
  • I don't think a shared module is what I'm after - I'm not sure it would solve the problem of being able to display the view of the LinksTableComponent within the ResultDetailsComponent, and bind data to it. – JohnD91 Feb 12 '20 at 12:25
  • My shared module contains form elements that I bind to from both my base module and my admin module. I'm probably not understanding your problem fully if you don't think it will work. – Kurt Hamilton Feb 12 '20 at 12:40

1 Answers1

1

It is always good to refactor components to individual modules.

Modules form a compilation context in angular. But while doing this you need to take note of few things...

  1. There are feature modules that you will not be importing in other modules (atleast not in many).
  2. There are shared modules that you will be importing in all or most of the feature modules.

So see how the links table component is used as per the above points and refactor your code.

And regarding the error...

As mentioned modules form a compilation context. so if you want to use a component of module "b" in a component of module "a" module "a" must import module "b" (now don't import app module in other modules :P. Refactor to move the component into another module).

All the best.

saivishnu tammineni
  • 1,092
  • 7
  • 14
  • Thanks, I tried to get one module working at a time, but I think the structure won't work that way so I'll move the other components into feature modules too like you suggest. – JohnD91 Feb 12 '20 at 13:03