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

[helenakohan]

Hi:

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
folder-page
shared.module
my-custom-component-1
my-custom-component-2

[ciccilleju]

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

[helenakohan]

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:
   ‘<‘my-custom-component-1></my-custom-component-1’>’

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 folder-page.page will use and both will have the ability to include the template the tag '<'my-custom-component-1> by just importing the shared module.

[ciccilleju]

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

[helenakohan]

Hi:

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

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

[ciccilleju]

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

![image|690x209](upload://mCUvQrQj2S5TSwNDBDo1B1BBjE.png

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 './main-page.page';

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

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    MainPageRoutingModule
  ],
  declarations: [MainPage, BookingItemComponent]
})
export class MainPageModule {}

[helenakohan]

This is for putting one component inside a page.

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

[ciccilleju]

Angular

[ciccilleju]

output:

[helenakohan]

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
});