Using Custom Components on Multiple Pages in Ionic

[@nirliptgaur]

Just another Thank You message among the above millions. I am teaching ionic 4 to some interns and your videos give them clarity. I just love the way you first take a normal approach, and then when the error pops up, like it does for us, you show the actual way things need to be coded. Excellent Effort. Hope Ionic Team hires you :P

[@denisgarcia01]

Thanks. The main fix for me was the explanation about the lazy loading not loading components. That made my day. Thank you!

[@gianlucacau5907]

You just saved me a lot of time that would have been wasted! Thanks man, speaking of Ionic you sure are the best!

[@muhammadshahrez2130]

Thank God I found you at the right time. I was banging my head figuring out what was wrong with my component and you litterally saved me from a nightmare.

[@simonsutherland15]

I was going around in circles, reading and re-reading documentation & examples (mostly of non-lazy loaded components) No i not only know what to do, but _why_ This was a life saver!

[@sergijonama1748]

Nice tutorial thanks! In Ionic 4 you should add some extra imports to avoid template parse errors. import { SyncIconComponent } from './sync-icon/sync-icon.component'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; @NgModule({ imports: [CommonModule, IonicModule],

[@acarolsfs]

Thanks man! You saved my life

[@oswaldkit]

Thanks man! You saved my life too.

[@buraksimsek2471]

Thanks man! You saved my life too. By the way, I encountered this in Ionic 6.

[@f1234411231]

Thanks man! You saved my life too.

[@tendaikatsande7578]

You saved my life, I had to also add other modules, like ionicModule, RoutingMoudle to the shared module

[@sapsapproductivity]

Thanks Joshua, Well explained.

[@shaunbrassell68]

Great video - taking one through the failure process was key to me learning, excellent job!

[@olumideayeni143]

Josh!!!..... Thank you, you really saved my day with this... I am so glad that i found this at the right now.

[@MurilloVieira]

Man, you're just awesome. I've spent a lot of time trying to figure out how normal angular components should work for ionic 4 and you've just lit my way. Thanks a lot!!

[@doronsayar1587]

Thanks man, you saved me from a mental breakdown!

[@muzz88]

Nice one, I was convinced I was never going to use shared components in ionic until this. Thanks

[@rudikatzer1606]

Amazing. Works for me in 2022

[@crassProgrammer]

This was what exactly I wanted. Thankyou very much!!

[@AcquahEmmanuelBaiden]

Thanks Joshua. This was very useful

[@sathvikakopalli2574]

That was really a great explanation you have helped me a lot bro 🙌🙌 Hope you continue doing lectures like these 🥺

[@Garciia]

Hey still useful, I've been trying to get into it and this clear my head around the subject, ty

[@izzatullokanoatov370]

I will take off my hat in front of your tutorials. Best of the best.

[@mohammadhadiemami2670]

you saved 2 hours of my time!! THANKS

[@zhoobinjalili5946]

Great, helped me a lot! Thanks Joshua!

[@mekbeb]

Thanks Josh, nice quick and easy explanation. God bless!

[@Iam_AndersonP]

Grat tutorial. Another thing in cosideration is that the ionic cli has a more easy way to crete a shared module. You just hast to run the command ionic g module shared (or wharever name you want) and it will create the module with the necesary structure you need

[@kyatar]

you just made my day, thanks for the awesome explanation

[@rodrigomgsys]

Great tutorial, It has worked perfectly for me. I was facing this error when tried to load a custom component in a PageModule. Thank you very much for sharing. :-)

[@yorlandIII]

Amazing!! thank you for the detailed explanation!!

[@Sandeep-vr8ri]

nice and simple , thanks bro.

[@grab0wski]

Thank you Joshua Morony, you saved my day, I spended amount of time this morning to resolv this issue =))

[@DavidHodges47]

This really solved my problem. Most of the other results from Google searching were wrong about this, possibly due to changes in versions of ionic or angular. I do wish that you could make the source code for this one example available on github or something similar. Also, when you use "ionic generate module", it generates a "spec" file, which throws errors unless you delete it.

[@lesetjalese7462]

Thanks this really saved my day.

[@allan9537]

Thank you so much! Saved my day!!

[@VinayKumar-bl2ob]

Thanks a lot, you are great at explaining👍👍👍

[@jacobsultd]

Thank you Joshua. Saved me..

[@argieabedejos760]

Thanks man. This saves my day.

Great tutorial! If you're thinking about a new one, can you please make a tutorial about importing JavaScript or npm packages to Ionic 4? The other day I needed to import Bson to my Ionic 4 project but I had a bunch of errors and I quit.

[@vp3275]

Great quality, you deserve mor views :) Thanks !

[@fcsalmeida]

Thank you! You are the man! It saved me from a big problem !!

[@aliciajanssen6548]

Thank you! The instructions are fantastic!

[@psv6009]

Thanks too much your video, you solved ' 2 modules' for me.

[@ThukuWakogi]

You saved a life sir

[@videodr.9402]

Thanks, Joshua Morony, you saved my day :)

[@jesusdcg7583]

Well explained, thank you

[@bankoleemmanuel1088]

Thanks Joshua

[@youngwise14]

Thanks man! This was right on time.

Thanks for the video!

[@sarath9077]

Thank you so much Joshua. I have one question though. System throws error when I use ion elements like ion-item etc inside my custom component. How do we solve that issue?

[@sarath9077]

Update: It got fixed by adding CUSTOM_ELEMENTS_SCHEMA in the schema of component.module.ts. schemas: [ CUSTOM_ELEMENTS_SCHEMA ],

[@karlzone2]

Sorry, I know this is five months late, but do you know why this happens? I used loads of ion elements, but didn't get this error, though I saw someone on a forum suggesting your solution. What does CUSTOM_ELEMENTS_SCHEMA do? It's clearly important (or at least it used to be?)?!

[@jeffcordova]

Josh! Thank you for this! Thank you for saving me again. :)

[@magicalkunal]

Thanks. it helped me a lot.

[@sebasA]

Hi thanks for the video, Im using the Ionic side-bar template and in a page I desided to add a component just like you with a module, the problem is the sidebar cant be slide if mi finger pass trough the component. For fix it I just reduced the component area to slide the sidebar but the sidebar looks lagy (just happen in the page where I added the component).

[@devinvail67]

As always, love your tutorials. In this one you added background music, not sure why. I found it distracting. Following your voice and the code is enough data to handle for my brain :-)

[@joeporsche1767]

You just save my day. Thank!!!

[@chularansifernando5]

Thank you, I also need to know how to use one page on multiple pages in ionic 4? Could you please add another video for that.

[@WajahathKhan04]

Thanks Man, 1000 Likes :) You just give me the result of my struggling 5 hrs

[@taha5049]

Thanks Good Lad you Saved my day!!

[@walaazahran29]

thanks you helped me so much !

[@joseduvanrubianoperalta1632]

Good tutorial, thanks.

[@rStudius]

Thanks a lot! Helped me so muuuch

[@nileshupadhyay7248]

Hey Josh thanks a lot buddy, you saved my time.... Yes I really enjoyed the tutorial.. :)

[@philipvandrunen3728]

Thank you, thank you, thank you. I still don't completely understand, but at least my code is working again!

[@emartosgomez]

Thank you so much! Really useful!

[@yccodei]

Thanks a lot for your help

[@RahulYadav-hs2un]

Nice Video

[@Arudion]

Additional: - If you want to use nested components, you have to add them to the entryComponents of the ComponentsModule - If you want to use Ionic Components, you have to add IonicModule to the imports of the ComponentsModule

[@babyamg]

Example: const tmpModule = NgModule({ declarations: [tmpCmp], imports:[IonicModule], entryComponents: [tmpCmp], })(class {});

[@MarioShtika]

​and also if you want to use things like `*ngIf` you should import `BrowserModule`, but because this is already imported on app.module.ts you should import `CommonModule` instead `imports: [IonicModule, CommonModule],`

[@karlzone2]

I should have read your comment @Mario, god damn. But yeah, if you wanna use NgFor, NgIf, then do :import { CommonModule } from '@angular/common';

[@Karthik1516]

I had the exact same error. Thank you.

[@tpamarasekera]

Great tutorial! !!!!!

[@erna3477]

Saved my night... Thank you!

[@mojinzhang2250]

super helpful thanks!

[@carlosgaleanohn]

Is more easy than Ionic 3... TY for the explaining it!

[@muhammadhussainn4389]

Thank you for this video!

[@wealth_developer_researcher]

Thanks!!! It helped me :)

[@jluis859]

saved my life

[@cdevidal]

Appreciate it! I should have checked your video first :-)

[@27brenner]

THANK YOU

[@luisdonis2147]

Thank you sooooo much!!!

[@andriyzhuk8830]

Thanks!

[@jamesdavidwyers9110]

1:01 Glad I'm not the only one with this problem....😅

[@serhiyhrabovy510]

thank you!

[@elmergarcia.a5536]

thank you!!

[@manarmohammad8232]

thank you

[@developpeuranonyme9428]

Thank you very much, that helped me a lot :)

[@israelnunesoriente7722]

VOCE É Incrivellll

[@thellexacademy]

Nice One

[@calina9939]

pretty Josh thks x)

[@DieDie-us4oo]

Thank you man!!

[@HOW-bt3et]

thanks man

[@MOHAMMEDSOKAILY]

Thank you, you saved my day

[@Hicham_SaAh]

thank you , i have one question please , if i have 2 folders one called example same what you made and the second called example_2 but i want to show example_2 in the home page and example into detail page . is it possible ? and how it will be ! thanks in advance ...

[@JoshuaMorony]

So you want two separate components, one goes on the home page one goes on the detail page? You could do a variety of things. If you are only using the components on one page each you could just add them as a declaration to that pages module and ignore creating a components module altogether. You could create a single shared component module (like in the video) that includes both of the components, and then include that shared components module in both of your page modules. Or, you could create a separate module for each of your two components (same as the video except instead of components.module.ts you would have example-one.module.ts and example-two.module.ts), and then import the appropriate module into the module for the page you want to use it on.

[@Hicham_SaAh]

@@JoshuaMorony thank you so much

[@SajalSuraj]

This helped :)

[@ginil]

in the ionic 4 conference app, there aren't any components, just pages. Is it possible to include a page in another page, just like a component?

[@kinetik2018]

muchas gracias !!!

[@comformarkwebsite8833]

Thanks Joshua, another excellent explanation! Can you perhaps create an additional video that explains how to use a component within a component? Or, how to add a component to a page that was created as a component - ie. Using a component as a page, so the router points to "component: MyPageComponent" - now MyPageComponent doesn't have a module, so how do I add custom components to it? (This process works in Angular 7, but "does my head in" using Ionic 4 ! )

[@zsearthas]

from 7:09 solution starts, skip before

[@daveycrockettjr]

When using a custom component on multiple pages I notice that the component is created again (or at least ngInit() fires again). Is there a way to make a component that is at the root level and is not re-created if used on two pages?

[@javierandresfernandez6373]

Sorry if this is a trivial question but, what if I have defined a method inside a custom component, and I want to call it from an ion-button in a particular page. Supposing I had already done what it is told in this tutorial, how can I call that method?

[@JoshuaMorony]

You would just need a reference to the component you are calling the method on (e.g. grabbing it through @ViewChild), then with the reference you just call it like this.myComponent.myMethod();

[@harundiwan3213]

Thanks alot for this solution

[@emyprinso]

./src/app/home/home.module.ts 19:31-39 "export 'HomePage' was not found in './home.page' that is the error I am getting, if I can get your source code and use it as a boilerplate for my app I will appreciate it

[@sukdipkar8876]

how can use the component.css file in the page?

[@Cheikna98]

Merci beaucoup

[@LongNguyen-bj3ud]

Thank Bro ^^

[@JosephAli93]

I think i follow tutorial step by step, but got ERROR Error: "Uncaught (in promise): Error: Unexpected module 'TestComponentPageModule' declared by the module 'TestComponentPageModule'. Please add a @Pipe/@Directive/@Component annotation.