Using Custom Components on Multiple Pages in Ionic

  Рет қаралды 46,940

Joshua Morony

Joshua Morony

Күн бұрын

Пікірлер: 158
@nirliptgaur
@nirliptgaur 5 жыл бұрын
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
@gianlucacau5907
@gianlucacau5907 5 жыл бұрын
You just saved me a lot of time that would have been wasted! Thanks man, speaking of Ionic you sure are the best!
@simonsutherland15
@simonsutherland15 4 жыл бұрын
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!
@muhammadshahrez2130
@muhammadshahrez2130 5 жыл бұрын
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.
@denisgarcia01
@denisgarcia01 5 жыл бұрын
Thanks. The main fix for me was the explanation about the lazy loading not loading components. That made my day. Thank you!
@sergijonama1748
@sergijonama1748 5 жыл бұрын
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
@acarolsfs 4 жыл бұрын
Thanks man! You saved my life
@oswaldkit
@oswaldkit 4 жыл бұрын
Thanks man! You saved my life too.
@buraksimsek2471
@buraksimsek2471 2 жыл бұрын
Thanks man! You saved my life too. By the way, I encountered this in Ionic 6.
@f1234411231
@f1234411231 Жыл бұрын
Thanks man! You saved my life too.
@tendaikatsande7578
@tendaikatsande7578 4 жыл бұрын
You saved my life, I had to also add other modules, like ionicModule, RoutingMoudle to the shared module
@Iam_AndersonP
@Iam_AndersonP 2 жыл бұрын
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
@MurilloVieira
@MurilloVieira 5 жыл бұрын
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!!
@olumideayeni143
@olumideayeni143 4 жыл бұрын
Josh!!!..... Thank you, you really saved my day with this... I am so glad that i found this at the right now.
@sapsapproductivity
@sapsapproductivity 3 жыл бұрын
Thanks Joshua, Well explained.
@doronsayar1587
@doronsayar1587 Жыл бұрын
Thanks man, you saved me from a mental breakdown!
@muzz88
@muzz88 5 жыл бұрын
Nice one, I was convinced I was never going to use shared components in ionic until this. Thanks
@shaunbrassell68
@shaunbrassell68 4 жыл бұрын
Great video - taking one through the failure process was key to me learning, excellent job!
@zsearthas
@zsearthas 4 жыл бұрын
from 7:09 solution starts, skip before
@izzatullokanoatov370
@izzatullokanoatov370 5 жыл бұрын
I will take off my hat in front of your tutorials. Best of the best.
@AcquahEmmanuelBaiden
@AcquahEmmanuelBaiden 2 жыл бұрын
Thanks Joshua. This was very useful
@Arudion
@Arudion 5 жыл бұрын
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
@babyamg 5 жыл бұрын
Example: const tmpModule = NgModule({ declarations: [tmpCmp], imports:[IonicModule], entryComponents: [tmpCmp], })(class {});
@MarioShtika
@MarioShtika 5 жыл бұрын
​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
@karlzone2 5 жыл бұрын
I should have read your comment @Mario, god damn. But yeah, if you wanna use NgFor, NgIf, then do :import { CommonModule } from '@angular/common';
@mohammadhadiemami2670
@mohammadhadiemami2670 5 жыл бұрын
you saved 2 hours of my time!! THANKS
@allan9537
@allan9537 4 жыл бұрын
Thank you so much! Saved my day!!
@sathvikakopalli2574
@sathvikakopalli2574 2 жыл бұрын
That was really a great explanation you have helped me a lot bro 🙌🙌 Hope you continue doing lectures like these 🥺
@DavidHodges47
@DavidHodges47 5 жыл бұрын
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.
@rodrigomgsys
@rodrigomgsys 5 жыл бұрын
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. :-)
@zhoobinjalili5946
@zhoobinjalili5946 3 жыл бұрын
Great, helped me a lot! Thanks Joshua!
@grab0wski
@grab0wski 5 жыл бұрын
Thank you Joshua Morony, you saved my day, I spended amount of time this morning to resolv this issue =))
@crassProgrammer
@crassProgrammer 3 жыл бұрын
This was what exactly I wanted. Thankyou very much!!
@kyatar
@kyatar 4 жыл бұрын
you just made my day, thanks for the awesome explanation
@rudikatzer1606
@rudikatzer1606 2 жыл бұрын
Amazing. Works for me in 2022
@lesetjalese7462
@lesetjalese7462 2 жыл бұрын
Thanks this really saved my day.
@emyprinso
@emyprinso 5 жыл бұрын
./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
@mekbeb
@mekbeb 5 жыл бұрын
Thanks Josh, nice quick and easy explanation. God bless!
@Garciia
@Garciia 2 жыл бұрын
Hey still useful, I've been trying to get into it and this clear my head around the subject, ty
@yorlandIII
@yorlandIII 3 жыл бұрын
Amazing!! thank you for the detailed explanation!!
@ThukuWakogi
@ThukuWakogi 5 жыл бұрын
You saved a life sir
@argieabedejos760
@argieabedejos760 4 жыл бұрын
Thanks man. This saves my day.
@vp3275
@vp3275 5 жыл бұрын
Great quality, you deserve mor views :) Thanks !
@VinayKumar-bl2ob
@VinayKumar-bl2ob 2 жыл бұрын
Thanks a lot, you are great at explaining👍👍👍
@jamesdavidwyers9110
@jamesdavidwyers9110 2 жыл бұрын
1:01 Glad I'm not the only one with this problem....😅
@jacobsultd
@jacobsultd 3 жыл бұрын
Thank you Joshua. Saved me..
@Sandeep-vr8ri
@Sandeep-vr8ri 5 жыл бұрын
nice and simple , thanks bro.
5 жыл бұрын
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.
@videodr.9402
@videodr.9402 4 жыл бұрын
Thanks, Joshua Morony, you saved my day :)
@youngwise14
@youngwise14 4 жыл бұрын
Thanks man! This was right on time.
@taha5049
@taha5049 2 жыл бұрын
Thanks Good Lad you Saved my day!!
@sebasA
@sebasA 3 жыл бұрын
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).
@aliciajanssen6548
@aliciajanssen6548 5 жыл бұрын
Thank you! The instructions are fantastic!
@magicalkunal
@magicalkunal 3 жыл бұрын
Thanks. it helped me a lot.
@bankoleemmanuel1088
@bankoleemmanuel1088 5 жыл бұрын
Thanks Joshua
@jeffcordova
@jeffcordova 5 жыл бұрын
Josh! Thank you for this! Thank you for saving me again. :)
@fcsalmeida
@fcsalmeida 5 жыл бұрын
Thank you! You are the man! It saved me from a big problem !!
3 жыл бұрын
Thanks for the video!
@psv6009
@psv6009 5 жыл бұрын
Thanks too much your video, you solved ' 2 modules' for me.
@joeporsche1767
@joeporsche1767 4 жыл бұрын
You just save my day. Thank!!!
@sarath9077
@sarath9077 5 жыл бұрын
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
@sarath9077 5 жыл бұрын
Update: It got fixed by adding CUSTOM_ELEMENTS_SCHEMA in the schema of component.module.ts. schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
@karlzone2
@karlzone2 5 жыл бұрын
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?)?!
@RahulYadav-hs2un
@RahulYadav-hs2un 4 жыл бұрын
Nice Video
@chularansifernando5
@chularansifernando5 5 жыл бұрын
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.
@walaazahran29
@walaazahran29 Жыл бұрын
thanks you helped me so much !
@rStudius
@rStudius 3 жыл бұрын
Thanks a lot! Helped me so muuuch
@ginil
@ginil 4 жыл бұрын
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?
@WajahathKhan04
@WajahathKhan04 5 жыл бұрын
Thanks Man, 1000 Likes :) You just give me the result of my struggling 5 hrs
@jesusdcg7583
@jesusdcg7583 5 жыл бұрын
Well explained, thank you
@sukdipkar8876
@sukdipkar8876 3 жыл бұрын
how can use the component.css file in the page?
@yccodei
@yccodei 4 жыл бұрын
Thanks a lot for your help
@tpamarasekera
@tpamarasekera 5 жыл бұрын
Great tutorial! !!!!!
@Hicham_SaAh
@Hicham_SaAh 5 жыл бұрын
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
@JoshuaMorony 5 жыл бұрын
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
@Hicham_SaAh 5 жыл бұрын
@@JoshuaMorony thank you so much
@Karthik1516
@Karthik1516 5 жыл бұрын
I had the exact same error. Thank you.
@nileshupadhyay7248
@nileshupadhyay7248 4 жыл бұрын
Hey Josh thanks a lot buddy, you saved my time.... Yes I really enjoyed the tutorial.. :)
@wealth_developer_researcher
@wealth_developer_researcher 3 жыл бұрын
Thanks!!! It helped me :)
@joseduvanrubianoperalta1632
@joseduvanrubianoperalta1632 5 жыл бұрын
Good tutorial, thanks.
@erna3477
@erna3477 5 жыл бұрын
Saved my night... Thank you!
@devinvail67
@devinvail67 5 жыл бұрын
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 :-)
@carlosgaleanohn
@carlosgaleanohn 5 жыл бұрын
Is more easy than Ionic 3... TY for the explaining it!
@daveycrockettjr
@daveycrockettjr 5 жыл бұрын
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?
@philipvandrunen3728
@philipvandrunen3728 5 жыл бұрын
Thank you, thank you, thank you. I still don't completely understand, but at least my code is working again!
@emartosgomez
@emartosgomez 5 жыл бұрын
Thank you so much! Really useful!
@javierandresfernandez6373
@javierandresfernandez6373 3 жыл бұрын
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
@JoshuaMorony 3 жыл бұрын
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();
@vidalroland
@vidalroland 5 жыл бұрын
Great ! I have a problem with custom components. When I create a header component, it goes over the pages (no margin at the top of the page). You can see it there : ipassed.it Does someone have any idea on how to solve it ?
@comformarkwebsite8833
@comformarkwebsite8833 5 жыл бұрын
Did you fix it, I can't see a problem?
@mojinzhang2250
@mojinzhang2250 5 жыл бұрын
super helpful thanks!
@jluis859
@jluis859 5 жыл бұрын
saved my life
@thellexacademy
@thellexacademy 5 жыл бұрын
Nice One
@luisdonis2147
@luisdonis2147 4 жыл бұрын
Thank you sooooo much!!!
@muhammadhussainn4389
@muhammadhussainn4389 5 жыл бұрын
Thank you for this video!
@MOHAMMEDSOKAILY
@MOHAMMEDSOKAILY 4 жыл бұрын
Thank you, you saved my day
@JosephAli93
@JosephAli93 5 жыл бұрын
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.
@ericarnaud4314
@ericarnaud4314 5 жыл бұрын
I using Ionic 4 and can't doing this. I get an error : "Unexpected value 'DecoratorFactory' declared by the module 'ComponentsModule'. Please add a @Pipe/@Directive/@Component annotation." I create a post on Stack Overflow with the code but no response yet. Please help me !! stackoverflow.com/questions/58343712/unexpected-value-decoratorfactory-declared-by-the-module-componentsmodule
@27brenner
@27brenner 3 жыл бұрын
THANK YOU
@SajalSuraj
@SajalSuraj 3 жыл бұрын
This helped :)
@serhiyhrabovy510
@serhiyhrabovy510 4 жыл бұрын
thank you!
@elmergarcia.a5536
@elmergarcia.a5536 4 жыл бұрын
thank you!!
@manarmohammad8232
@manarmohammad8232 2 жыл бұрын
thank you
@DieDie-us4oo
@DieDie-us4oo 5 жыл бұрын
Thank you man!!
@andriyzhuk8830
@andriyzhuk8830 4 жыл бұрын
Thanks!
@calina9939
@calina9939 4 жыл бұрын
pretty Josh thks x)
@developpeuranonyme9428
@developpeuranonyme9428 5 жыл бұрын
Thank you very much, that helped me a lot :)
@noursidaoui8278
@noursidaoui8278 4 жыл бұрын
I tried importing IonicModule to my components.module in order to use Ionic elements but my page refreshes for a couple of minutes and throws a "Maximum call stack size exceeded" error. I tried adding CUSTOM_ELEMENTS_SCHEMA in the schema of component.module.ts and the same error happens Please help, I've been stuck on this for a day now :s
@snaidher5
@snaidher5 4 жыл бұрын
I have the same error, and in my component I put this @NgModule( { imports:[IonicModule], declarations: [ProductoComponent], exports: [ProductoComponent] } )
@israelnunesoriente7722
@israelnunesoriente7722 3 жыл бұрын
VOCE É Incrivellll
@harundiwan3213
@harundiwan3213 5 жыл бұрын
Thanks alot for this solution
@mehdi907
@mehdi907 5 жыл бұрын
when I created the component it wasn't declared automatclly on module.ts why?
@Dxpress_
@Dxpress_ 5 жыл бұрын
Yep, same here. Been spending hours wondering why generated components don't just work.
@cdevidal
@cdevidal 4 жыл бұрын
Appreciate it! I should have checked your video first :-)
@HOW-bt3et
@HOW-bt3et 6 ай бұрын
thanks man
Implementing a Swipeable Tab Bar in Ionic 4
2:49
Joshua Morony
Рет қаралды 11 М.
How to deeply understand Angular signals (...or anything)
10:51
Joshua Morony
Рет қаралды 7 М.
路飞做的坏事被拆穿了 #路飞#海贼王
00:41
路飞与唐舞桐
Рет қаралды 22 МЛН
А я думаю что за звук такой знакомый? 😂😂😂
00:15
Денис Кукояка
Рет қаралды 6 МЛН
黑天使只对C罗有感觉#short #angel #clown
00:39
Super Beauty team
Рет қаралды 27 МЛН
How to Pass Data Between Pages in Ionic Apps using Angular
27:00
Simon Grimm
Рет қаралды 16 М.
Ionic 4 Theme Builder with CSS Variables
12:12
Fireship
Рет қаралды 53 М.
Ionic Tutorial #6 - Creating reusable custom components
22:40
IT with Paulo Alves
Рет қаралды 33 М.
10 Tools & Services Every Ionic Developer Should Know
21:25
Simon Grimm
Рет қаралды 26 М.
Learn Ionic - Inline Components for beginners
1:47:09
Coding Technyks
Рет қаралды 1,5 М.
A visual guide to switchMap and "higher order" observables
7:46
Joshua Morony
Рет қаралды 9 М.
Vim Tips I Wish I Knew Earlier
23:00
Sebastian Daschner
Рет қаралды 80 М.
Ionic 5 App Navigation with Login, Guards & Tabs Area
35:55
Simon Grimm
Рет қаралды 34 М.
I could remove ALL RxJS in my Angular app, but should I?
7:02
Joshua Morony
Рет қаралды 7 М.
Angular team shows POTENTIAL new component authoring formats
4:31
Joshua Morony
Рет қаралды 11 М.
路飞做的坏事被拆穿了 #路飞#海贼王
00:41
路飞与唐舞桐
Рет қаралды 22 МЛН