How to access angular-component in ionic-page?

I have set up an ionic project and added a page "sumbuilder". After that, I added a component "partscount". The component was automatically added to the app.module.ts, but I didn't get managed to make the tag "<app-partscount></app-partscount>" running in my page. So I removed the component-declaration from app.module.ts, moved it to my sumbuilder.module.ts and then it worked.

<app-partscount></app-partscount>

Here is the working code:

import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import FormsModule from '@angular/forms';
import Routes, RouterModule from '@angular/router';

import IonicModule from '@ionic/angular';

import SumbuilderPage from './sumbuilder.page';
import PartcountsComponent from '../partcounts/partcounts.component';

const routes: Routes = [

path: '',
component: SumbuilderPage

];

@NgModule(
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [
SumbuilderPage,
PartcountsComponent
]
)
export class SumbuilderPageModule


Now the question: What do I have to add in this file (sumbuilder.module.ts) to access the Component, when it is declared in app.module.ts? I'm new to angular and sure, it is a beginner-question. Because I want to use this component more than once, I want to declare it in app.module.

app.module.ts:

import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import RouteReuseStrategy from '@angular/router';

import IonicModule, IonicRouteStrategy from '@ionic/angular';
import SplashScreen from '@ionic-native/splash-screen/ngx';
import StatusBar from '@ionic-native/status-bar/ngx';

import AppComponent from './app.component';
import AppRoutingModule from './app-routing.module';
import PartcountsComponent from './partcounts/partcounts.component';
import FormsModule from '@angular/forms';

@NgModule(
declarations: [AppComponent, PartcountsComponent],
entryComponents: ,
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
FormsModule,
],
exports: [
PartcountsComponent
],
providers: [
StatusBar,
SplashScreen,
provide: RouteReuseStrategy, useClass: IonicRouteStrategy
],
bootstrap: [AppComponent]
)
export class AppModule


1 Answer
1

If I understand your question correctly, you mean that how we can declare a component in a module and use it in another module. If you mean so, here is the answer:

Each angular module must specify it's declared components using declaration: of @NgModule decorator. If that module let other modules to use its components, then it must be specified in exports: of @NgModule. In such situation, another module can import the module and use its exported components. Here is an example:

declaration:

@NgModule

exports:

@NgModule

@Component(
selector: 'first-component',
template: `<p> I'm first component </p>`
)
export class FirstComponent

@NgModule(
declarations: [ FirstComponent ],
exports: [ FirstComponent ]
)
export class MyFirstModule


In another module we can use exported FirstComponent of MyFirstModule :

FirstComponent

MyFirstModule

@NgModule(
declarations: [ ComponentWhichUsesFirstComponent ],
imports: [ MyFirstModule ]
)
export class MySecondModule

@Component(
selector: 'an-optional-selector',
template: `<first-component> </first-component>`
)
export class ComponentWhichUsesFirstComponent


See this stackblits example.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy