Angular 9 Tutorial For Beginners #10 - Components

[@sreenuksr]

todo.module.ts changes import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CompletedtasksComponent } from './completedtasks/completedtasks.component'; @NgModule({ declarations: [CompletedtasksComponent], exports: [CompletedtasksComponent], imports: [ CommonModule ] }) export class TodoModule { }

[@ARCTutorials]

Thank you Sreenivas for sharing the updated code. Regards Sridhar

[@kasperkat2004]

Thank you, this solves the problem error.

[@sreenuksr]

@@kasperkat2004 welcome

[@ARCTutorials]

Thank you sreeni for helping the community 👍👍

[@sreenuksr]

@@ARCTutorials 👍

[@jacksm8709]

I love your simplicity in explaining complex issues. started from lesson i and I have not stopped

[@ARCTutorials]

This makes so happy and makes it worth my effort. Please drop me any queries or questions you may have, I will be happy to help you! Thanks again

[@DALJITKAUR-qn1oy]

Sridhar Sir, The way you explain each topic is simply awesome. These tutorials helps me a lot in understanding Angular. Your sacrifices don't go unnoticed. It would be even more helpful for me if you provide notes.

[@ARCTutorials]

You are most welcome Daljit. I have received your email. I will reply soon. Thanks

[@Devnikakiduniya]

Very good tutorial for beginners. Your English is very simple and easy to follow

[@ARCTutorials]

Thank you for your kind words and encouragement 🙏

[@SantoshKumar-hz6sl]

I m in the 9th Episode but excited to learn the way you continued. I would be thankful to get your notes.

[@ARCTutorials]

Sure Santosh. Drop me your email address and I will send out the notes. Thanks Sridhar

[@ashokpothala1472]

@@ARCTutorials Hi sir please send notes to [e-mail]

[@mounikasivakoti8475]

Hi Sridhar sir,i am learning angular from the begining, i am following all your videos,it's very helpful to me.Thanks alot.

[@ARCTutorials]

Glad to hear that Mounika. You are most welcome!

[@aswarthanarayanareddyb176]

Hi Sir, actually im java developer, understanding the javascript frameworks really difficulty at the beginner, but you have teaching so cooool. Even with notes of each tutorial thats great advantage for us. In this serious i missed the “parent & child” data exchange. Note: if we get the tips from each tutorial really helpfull for us.

[@ARCTutorials]

Glad you are finding the tutorials helpful. I will try and share it asap. Thanks Sridhar

[@nymarfernandez6560]

Hello @ARC Tutorials, I am sending my HUGE GRATITUDE for your clear and very informative way of teaching about AngularJS. I felt so hopeless for the past days searching for good tutorials about AngularJS but then I found yours. YESSSSS! 😊😊😊 I hope your channel will be recognized by others especially those who are developing web programming skills. 😊😊😊 If you don't mind, Is there any website or platform that we can get a Certificate? I think you are fit to teach in on-demand courses online like Udemy, etc. Anyway, Thanks a lot Again! 😊😊

[@ARCTutorials]

Thank you so much Nymar for your kind words and encouragement.

[@shubhamkumar-px9qd]

@ARC Tutorials Hi sir, please explain for why do we need to exports: [CompletedTaskComponent] in todo.module.ts, While we do not need to exports[TaskComponent] in app.module.ts file ?

[@ARCTutorials]

Hi Shubham. I would request you to move to Angular 10 tutorials as some of these questions I have answered in Angular 10 series. kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@angelfriendhouston]

Seems like there is missing step at importing todoModule inside app module. In the TodoModule, you have to add the keyword exports: with all the exportable components. Here in this scenario exports:[completed-task-component]. Then it will work.

[@ARCTutorials]

Yes I didn't import it correctly. We need to export the components and then it works!

[@SurajKumar-cg1mm]

Hallo sir what are the backend technology we can use with angular as a sever like nodejs.. And???

[@ChristofRackStefaniak]

I like, that you correct you errors live and don't cut it out

[@ARCTutorials]

Thank you so much for your kind words. Appreciate them. 👍

[@hyperledgerfabric4106]

Thanks Sridhar, your way of explaining the topic is great .The conent and the representation is outstanding .It will be more helpful for me if i get the notes for angular9 tutorials.

[@ARCTutorials]

Thanks buddy for your feedback. Please send email at [e-mail]

[@hyperledgerfabric4106]

@@ARCTutorials thanks a lot for the response

[@sivajyothiputha5900]

Hi Sridhar, First I created the components app.module.ts is updated. How can I delete the component. How can add same component in different place.

[@ARCTutorials]

Hi Siva. If you are using Visual Studio Code, just drag and drop into the folder and path will be updated automatically. Else you need to delete the components first, then remove instances from modules.

[@amaladharmana1735]

Hello sir, I have a doubt if we do a particular project or start a project how we will know that which components and modules or anything we have to generate regarding our project.

[@ARCTutorials]

Hi Amala. Its all application logic driven. But some will be basic components like header, footer, main content etc

[@deepakkona6865]

Sir 1.can I write JS in TS file of angular. 2. will Http post data always should be JSON.

[@akashkhochade8099]

I m just start angular .which version should I learn ? Angular 9 or 12

[@ARCTutorials]

Hi Akash. I would say start with 9 as 12 has only minor changes 👍

[@shubhamthakare2216]

very helpfull and proper explaination..please post notes.

[@ARCTutorials]

Sure Shubham will do!!!

[@tirtharajghosh2680]

Hi sir, what will happen if I changed the name of the selector with another name. and why is written in the selector.

[@rakeshkalluri2463]

Hello sir, If we use the component from another module inside the app component i.e in app.component.html I got an error like it is not a known element and if I export that component from the todo module it works

[@angelfriendhouston]

Seems like there is missing step here: In the TodoModule, You have to add another keyword here exports:[completed-task-component]. Then it will work.

[@atharvagondhalekar2364]

Hello Sir, The tutorials are really great!! Can you please explain why we added : exports: [CompletedTasksComponent] to the todo.module.ts? Was not able not get that part Thank you!

[@rajasekhar5135]

one small dht i dont no that its exactly question or not when i was created todo module here its doesnt contain exports section defaulty thts y i got the error while on the time of adding the tasks completed component to appcomponent y like that happen but the prob was solved y the exports:[completedtasks component] not came defaulty in the to do module .sreedar bro

[@shaikhzoyeb]

11:16 how did you IntelliSense auto complete in terminal ./OneConversion/ by just typing ./one

[@ARCTutorials]

Hi Zoyeb. I hit the “tab” on keyboard

[@shaikhzoyeb]

@@ARCTutorials thank you so much and your tutorials are easy to understand. I bit lost when you created pipe in decorators tutorial although its fantastic series i watched up till 10th tutorial and i will continue till end

[@ARCTutorials]

Thanks Buddy. Please do let me know if you have any queries or doubts!!!

[@shaikhzoyeb]

@@ARCTutorials thank you so much for the efforts ,you put your valuable time to teach others. I know developers are not free in terms of time, in mean time we learn new things to improve ourself however you decided to teach others for free is a kind thing. Keep teaching and thanks you @sridhar Rao

[@jacksm8709]

if u create a component not in the root(app) , it means u have to create a module first before creating the component?

[@ARCTutorials]

Yes that's correct. Its good practice to create individual modules and components inside the module to keep code separate and easy to maintain

[@kolluruprakash]

We can create components inside of one specific module with a simple command : oneConversion > ng g c todo/completed-tasks i guess.

[@ARCTutorials]

There are multiple ways to create components inside a module. 1. We can navigate to the folder inside module and run the ng g c command 2. We can mention module name in command using -m option 3. The third method which you have suggested. All are correct ways of implementing - there is no right or wrong method.

[@adapass]

Hi nice tutorial. but you didn't mention how you drill down to go to the respective component. i tried by hovering on the components. but i am not able to drill down. Later only i understood that by pressing control button in the keyboard and hovering the mouse pointer over the component will get you to drill down the component. You could have mentioned that for the sake of newbies

[@ARCTutorials]

Crp Rajan Sure Rajan. Im also new to this format of teaching. Will try and keep things detailed as possbile

[@rakeshsingh2635]

Sir could you please make a tutorial series on JavaScript. Thanks in Advance.

[@ARCTutorials]

Hi Rakesh. Many thanks for your kind feedback. Surely i will consider making Javascript tutorials too

[@benj.1995]

There's an error on the last part. exports: [ CompletedTasksComponent ] just paste it on the todo module. Great Work!

[@ARCTutorials]

Yes Ben. We figured it out in the comments section. Thanks mate for sharing. Regards Sridhar

[@nipunachathuranga7493]

Thanks bro you save my day...

[@kiranmoulimouli4283]

Sir Im getting error while Importing a module you replied to other comments to add export: [completed-tasks-component] it's OK but I'm not getting where should I add that in app. Component.html r In app. Module. Ts plz explain that

[@ARCTutorials]

Hi Kiran. Sure i will try and post the fix in the comments section soon. Thanks Sridhar

[@josbexerr5166]

excelente clases

[@ARCTutorials]

Thanks Buddy!!

[@panguluriramesh2804]

Can u do a video for type script syntaxes pls

[@anjalirai5337]

after adding export[completed-task-component], i am still getting error as could not resolve ./app.completed-tasks.component.html in context of C:/Users/User/Desktop/Angular/oneConversion/src/app/todo/completed-tasks/completed-tasks.component.ts)

[@ARCTutorials]

Hi Anjali. Can u pls check the comments section please? We have found the issue and the fix as well. Let me know if u still need help. Regards Sridhar

[@anjalirai5337]

@@ARCTutorialsI have used the export keyword in todo module but still getting the same error and not able to resolve it even by seeing the comments below.

[@ARCTutorials]

exports: [ CompletedTasksComponent ]

[@anjalirai5337]

@@ARCTutorials i have done this but still getting error which is mentioned above.

[@nikhathtabassum6115]

there is an error after adding todomod to appmodule.ts file,so could you please give the solution

[@ARCTutorials]

Hi Tabassum. Can you pls share details of the error you are seeing in the console?

[@sadanandnb6626]

Make some videos on interaction between components.. Like @output, @input, @viewchild..

[@ARCTutorials]

Sure Sadanand. Will do soon

[@madhansaravanan9726]

Hello sir, first of all thank you very much for this tutorial, its of great help to people like us. Especially, in this video end, while performing ( Including component from other module into app module, throws an error. Also i was trying to get the solution from this video, Howeever, that part is missing, kindly advice

[@ARCTutorials]

Hi Madhan. Yes I had missed that part. But I have covered it in very detail in Angular 10 series. Please check it out - This tutorial also includes Angular component communication. kzbin.info/www/bejne/qqPbn2SGfrxjfNE

[@madhansaravanan9726]

@@ARCTutorials thanks very much

[@phrozensmokse]

Hi Sir, Only after giving exports: [ CompletedTasksComponent ] in the todo.module.ts i was able to get the contents of the completed-tasks component to the app.component.html page Till that time it was showing error.

[@phrozensmokse]

Am i doing it right ? I am not able to attach the screenshots else i would have attached the error.

[@ARCTutorials]

Yes thats correct. Since the component is in other module we need to export the component. What u did is right

[@raghavr7533]

Hi Sir, when I generated a component inside a module and trying to import only the module in app.module.ts and then when I try to call that component from app.component.html. It wont show

[@raghavr7533]

FYI that component is generated inside src/app/todo/tasks. Where todo is module and tasks is component. I want this component to be called in app.component.html

[@premkumarankaiah7809]

I am not getting the contents of app-completed-tasks component dsplayed in the final output. I am getting only 'List of completed tasks'. 'completed-tasks works!' is not displayed. I have exported the component from 'TodoModule' as 'exports:[CompletedTasksComponent]' suggested by Sree.

[@premkumarankaiah7809]

Sorry about this comment. It is working after building correctly and restarting the browser.

[@ARCTutorials]

Cool. Let me know if you run into any issues Prem

[@bramhendra]

Hi Sir, I have 50 components in my application. I want to add header to all of them. how can I achieve this? could you pls explain littlie bit more.

[@ARCTutorials]

Hi Bramhendra. We can create a single component called "header" and then use it the template it will inject for all components.

[@bramhendra]

@@ARCTutorials thank you sir

[@venkats2645]

I get an error NG8001: 'app-completed-tasks' is not a known element. Can you please tell me how to solve it.

[@ARCTutorials]

Hi Venkat. Please see the comments section, we found the issue and provided fix as well. Please try and let me know if you still have any issues. Thanks Sridhar

[@simrankourb1759]

Hi Sridhar I exported CompletedTasksComponent in todo module still getting an error. After compilation, cannot Get is showing on the browser

[@ARCTutorials]

Hi Simran. Can you please see the comments section, we have figured out what's going wrong and gave solution. Please let me know if you still see issue. Regards Sridhar

[@SurajKumar-cg1mm]

Hallo sir how can we generate a component in a specific module.

[@ARCTutorials]

Hi Surja. you can do it in many ways. The most simplest and easiest way is - first create a module and then navigate to that folder and run the command ng g component

[@SurajKumar-cg1mm]

Ya thank you sir

[@AdilSyed_Imam]

What if we don't have module inside task and we try to create 1 more compenent inside task what will happen?

[@venkatasainikhil3435]

Sir can you provide me this notes This tutorial helps me a lot in understanding angular

[@venkatasainikhil3435]

Mail id : [e-mail]

[@ARCTutorials]

Hi Nikhil. Pls drop me a note at [e-mail]

[@lkyug]

hello sir ,is it full video of component, or missing something ?

[@lkyug]

because its not showing completed-tasks works! of CompletedTasksComponent

[@ARCTutorials]

Yes we figured it out in the comments section. Thanks Sridhar

[@sarakat2875]

I would be grateful if you could send me the whole notes about angular

[@ARCTutorials]

Sure. Send me email at [e-mail]

[@chetankumarselukar2618]

This is very good tutorial. I like it. Sridhar can u please share text file

[@ARCTutorials]

Thanks Chetan. Can u pls drop a note at [e-mail]

[@komalgholap7891]

hello sir, I am your new Subscriber, I am finding the angular best tutorial Thanks for Making Angular Tutorial your tutorial is very good and easy to understand all concepts please sir I want notes.

[@ARCTutorials]

Hi Komal. Thanks for your kind words. Im starting Angular 10 series and im sure you will learn lot more from it 👍👍

[@komalgholap7891]

@@ARCTutorials Thank you, sir, please sir suggest to me how to use Angulars All Concept in one project ... like any management project. so all it is easy to use in one Page..Please Suggest me, sir

[@ARCTutorials]

Hi Komal. Im starting Angular 10 series soon. I will cover live project with fundamentals in that series. Thanks

[@dineshrao4980]

Where can i find the notes?

[@ARCTutorials]

Hi Dinesh. Pls send email at [e-mail]

[@MrPyogi]

Hi,, could you pls share the files which you have created, in github

[@ARCTutorials]

Sure Paramesh. Im planning to upload the files into github repo soon. Will update back. Thanks Sridhar 🙏

[@MrPyogi]

@@ARCTutorials Great! Sridhar...

[@sibaprasaddalai3775]

Towards the last of ur tutorial u forgot to tell in order to use component from another module we have to export the component in other module and import the other module into current module. I struggled to achieve and googled it to overcome the issue.

[@ARCTutorials]

Hi Siba. Yes but I have covered it in detail in Angular 10 tutorial. So make you once you are done with Angular 9 move to Angular 10 series.

[@sachinshajan8066]

video starts at 2:25

[@jifshaashraf7156]

I would be grateful if u could snd me the whole notes abt angular

[@ARCTutorials]

Hi Jifsha. Sent. Please check your email

[@shubhamsoni32]

Hii Sridhar Sir, Ii can easily say its way better that any paid course. The way you explain is simply great ....it would be even more helpful for me if you provide notes and PPT with me.

[@ARCTutorials]

Hi Shubham. Thank you so much for your kind words

[@HasiniDayanandaGPlus]

can you share this Notes

[@ARCTutorials]

Hi Hasini. Can you pls drop me note at [e-mail]

[@dikshithpk2285]

hai sir .. i am very happy to go through your tutorial ..you have taken lot of patience to get it delivering it in details.. i m very thankfull to you . i have one more question for you ..?I am studying to become full stack developer ..and i have 2 years of experience (.net domain)kindly suggest me details of going through step by step what and all i should be knowing ...? In the mean while can you please....pass your number or email ...will catch up for coffee some day ...?

[@ARCTutorials]

Hi Dikshith. Sure. We will catch up over coffee soon. You can reach me at [e-mail]

[@venugopalpalabandla8103]

Hi Sir, please provide that notes ..

[@vinodkus1]

Its appearing in complete. It finished sudden.

[@ARCTutorials]

Hi Vinod. I had some technical issue towards the end hence this video ended abruptly. I am soon going to cover Angular 10 in detail so I will cover components again in detail.

[@gwapojudkoalangan]

you examples should focus on one example. it'll be more understandable. but i still appreciate how you approach this. but i'm still at 10th video so i'll see how this goes on.

[@ARCTutorials]

Thank you so much for your kind words. Kindly see all the tutorials I am sure you will benefit from them. Let me know if you have any issue or have any queries. Thanks again. Regards Sridhar

[@srinupendem9713]

Sir, Could you please share notes.txt

[@fullstackguru1134]

It would be more helpful if you explain what is missing rather than suggesting to check comment. please explain and pin the comment on top Thanks

[@ARCTutorials]

Thank you for the suggestion. I will do that. Thanks Sridhar

[@yadhim3813]

Bro place send all the notes 🙏🙏🙏

[@kanikashrivastava4875]

sir please share notes

[@ARCTutorials]

Hi Kanika. Can u pls check the tutorial comments section, we are collecting all notes in the comments sections. Please let me know if you are unable to find them!! Regards Sridhar

[@kanikashrivastava4875]

@@ARCTutorials I'm unable to find it

[@kanikashrivastava4875]

sir can you make the playlist on django with angular

[@ARCTutorials]

I will soon the share the notes and code

[@shakir2298]

ERROR in src/app/app.component.html:4:1 - error NG8001: 'TasksCompletedComponent' is not a known element: 1. If 'TasksCompletedComponent' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 4 src/app/app.component.ts:5:16 5 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent Even after exporting the [TasksCompletedComponent], i'm getting this error, could u please explain what is this error regards, it would be appreciated?? Thanks in advance!!

[@ARCTutorials]

Hi Shakir. We have solved this issue. I did not export the component. Here's the update code to export the component import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { CompletedtasksComponent } from './completedtasks/completedtasks.component'; @NgModule({ declarations: [CompletedtasksComponent], exports: [CompletedtasksComponent], imports: [ CommonModule ] }) export class TodoModule { }

[@shakir2298]

@@ARCTutorials I have updated the code, even though i'm getting the same error? import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TasksCompletedComponent } from './tasks-completed/tasks-completed.component'; @NgModule({ declarations: [TasksCompletedComponent], exports:[TasksCompletedComponent], imports: [ CommonModule ] }) export class TodoModule { } ============================================================================================ TERMINAL OUTPUT ============================================================================================ ERROR in src/app/app.component.html:3:1 - error NG8001: ' 1. If 'TasksCompletedComponent' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. 3 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/app.component.ts:5:16 5 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.

[@shakir2298]

@@ARCTutorials Alright I've got the solution, thank u so much..

[@codeeasy6659]

@@shakir2298 Could you please let me know the solution for that Error! Bcoz i am also getting the error. Is there anything wrong with export class TodoModule { }.

[@mohamedhanfy5319]

can you send me your notes

[@ARCTutorials]

Hi Mohamed. Can you please drop me a note at [e-mail]

[@mohamedhanfy5319]

@@ARCTutorials ok

[@wertypop9009]

kuhm·*pow*·nuhnt :)

[@vaibhavsharmaiiitu9319]

Sir I have mailed you please share the notes

[@JhourladEstrella]

"Com-ponents" LOL

[@ARCTutorials]

Ha ha ha. I bet this wont be the last one from me 🤣🤣

[@yusufsaif0]

sir please share notes

[@ARCTutorials]

Sent please check

[@dammusuresh1006]

Sir plz share notes