Issue related to adding component into another in Angular6

Question

i have web application with Angular 6.

I have following structure:

src
 -app
   -auth  - folder
       -auth.component.html               
       -auth.component.scss
       -auth.component.ts 
       -auth.module.ts 
   -car-details  - folder
       -binning-table  - folder
             -binning-table.component.html
             -binning-table.component.ts
             -binning-table.component.scss
       -car-detail.component.html
       -car-detail.component.ts
       -car-detail.component.scss
       -car-detail.module.ts
    -import-binning   - folder
        -import-binning.component.html
        -import-binning.component.scss
        -import-binning.component.ts
   -app.component.html
   -app.component.scss
   -app.component.ts
   -app.module.ts

now car-detail module registerd into auth.module.ts and authModule is registered into app.module .

i want to load binning-table component into import-binning.html

what changes should make in order to load one component into another.

what kind of connection i need registerd in which module

Thanks

Answer 1

We don't register a module we import it where ever required, a module can be imported into multiple modules(eg shared module).

But We can only declare a component in one module, if we need to use the same component in another module, we export it from the same module and import that module into the module where it is required

eg if we have a component by name A declared in module name module1, and if we need to use the same component in some other module ie module 2, we do something like this.

@NgModule({
declarations: [
 Acomponent
],
exports: [
 Acomponent
 ]
})
export class Module1 {}

@NgModule({
 imports: [Module1]
})
export class Module2

By using the above syntax we can use AComponent in module1 as well as module2, generally, the components which are shared throughout the applications we generally put them in the shared module.

Answer 2

Instead of declaring 'BinningTableComponent' inside 'app.module.ts', you need to declare it inside 'car-details.module.ts'. You need to include this same component 'BinningTableComponent' as part of exports array.

So car-details.module=>auth.module=>app.module. You can access 'BinningTableComponent' inside app.component.ts.

Refer the stackblitz code https://stackblitz.com/edit/angular-ivnodq