How to put shared module inside a component? Or how to put a component inside html to another component?


I have the folder-page I created a shared module which has a component that I’m putting inside the html: .

I need to create a new component (my-custom-component-2) which also uses the first component inside the html. But the component does not have a module like the folder-page has.

How to do it?

Here are the enteties that are involved

generate your custom-component-2 with the command

ionic g component folder-page/my-custom-component-2 (or simply my-custom-component-2)

then import the module into shared.module

Hi: 10x for replying

I have already created a component. I need this:

  1. If you can answer this then it will be great, and it will be sufficient for a solution for the time being:
    folder-page.html template has the tag: ‘<‘my-custom-component-1></my-custom-component-1’>’
    Also I need that in my-custom-component-2.component.html template will have the tag:

  2. The better way I need this to work is that I have a shared.module which I want that both my-custom-component-2.component and the will use and both will have the ability to include the template the tag '<'my-custom-component-1> by just importing the shared module.

if you create the component the way I told you, it will automatically have the .module and .routing files that you need to import in your component and use it with the tag


I did it but it still doesn’t give the .module

I can generate a page but I don’t want the .routing

you can delete it after generating, anyway i was wrong, to get the .module you need to to

ionic g page your-component-name

with Angular 15 (and maybe 14) you don’t neet to use .module

for example
this is my component


i use in my main-page

just declaring it like follows

my mainpage.module contains the declaration as follows:

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MainPage } from './';

import { MainPageRoutingModule } from './main-page-routing.module';
import { BookingItemComponent } from 'src/app/components/booking-item/booking-item.component';

  imports: [
  declarations: [MainPage, BookingItemComponent]
export class MainPageModule {}

This is for putting one component inside a page.

How to put one component inside another and also on the MainPage?





Tried it with a ion-modal and its not getting me a good result.
It seems the Modal cannot be standalone.

const modal = await this.modalCtrl.create({
  component: MyCustomComponent