Angular Tutorial - 19 - Using a Service

[@Codevolution]

After watching this video, Please watch video #31 to update to angular 6.

[@trachanh1609]

I can tell you why the series are so understandable and so awesome, because the author knows how to teach. Most of the tutorials or courses will teach you the HOW, the WHAT but not the WHY. Why do we need this ? Why do we do it this way but not that way ? If you understand the WHY then everything starts to make sense and you see how things are connected, you will also remember much better etc. To deliver the WHY the author needs to understand the topic really well and construct the explanation so that everyone can understand. And Codevolution nailed it. I wish all the courses could be this clear and easy to understand. Please keep up the good work ! I just sent you some money to support the channel. Thanks a lot !

[@Codevolution]

Thanks a lot man :)

[@harshbhardwaj4105]

@@Codevolution literally, you are brilliant.

[@jasonmcintosh2632]

I whole wholeheartedly agree. Just listening to this guy talk makes me feel calm and everything he says is so easy to understand. He really knows his stuff.

[@aliraza9511]

absolutely you are right brother!

[@narendra9903]

Absolutely right👏👏👏

[@CageFighter178]

For the ones who are following this tutorial in newer versions of Angular CLI, use "public employees = [] as any;" when removing the hard-codded employees details.

[@sharozekhan2280]

Thankssss

[@innovativethinker797]

Tqs bro.

[@anthea6130]

thank you!

[@dominicmarinduque848]

you saved me bro, i googled looking for a fix for and hour then gave up looked at the comments.

[@deepthik9500]

Can I know why we are using as any after an array

[@songlee8456]

You really deserve a 5 star. I've watched all the top courses on Lynda, udemy. They not even understand what they teach. They all teaching the same thing. You put yourself apart. If you can feed us like that with more advanced topics , I will definitely support you

[@erhode5210]

Awsome work dude, keep it up. We can see the diffences between big organisations courses made to be "classy" in surface but empty in the background and peoples like you understanding what they are doing and therefore knows how to teach it.

[@Zawodowieec]

Great tutorial as always. For angular 7 you have also to import service in your both components and in components you have to use ``public employees: any`` instead ``public employees = [];`` Otherwise it won't work. Thank you, Vishwas ;)

[@TheSarcasticGirl02]

Thanks 😄this helped me ❤

[@TheSarcasticGirl02]

Thank you❤this helped me

[@Zawodowieec]

@@TheSarcasticGirl02 Glad I can help you :)

[@Ab-ol5xc]

thank you helped me too

[@fasikademelash4638]

Thanks

[@Mauryarohit1]

I have been using DI as a professional for a while now but never understood it. Watching the previous video and first 2 mins of this video, I completely understand it now. Thanks.

[@markchai8965]

Best angular tutorial I’ve ever watched. So easy to follow and understand. Thanks a lot

[@jaypatel2471]

JUST SHORT AND PERFECT , @Codevolution sir , please make tuts for Angular 17 ..........

[@adriluz_dev]

Man, I love the excellent way you teach and explain all the content in only a few minutes. How do you that??? I hope a day I can explain as excellent as you

[@billbortkevich2300]

Including conceptual explanations, like why and how decorators the way they are - brings so much more clarity. Thank you again Sir

[@ranietukuri2430]

Great tutorials. Hands down the best videos for learning on KZbin. Anyone can learn and code after watching your videos.

[@mechadroit]

This series is the best angular tutorial I have found. Good work.

[@Jeorgius]

Holy shit! Now finally there is someone, who have explained it to me the way I would understand. Thanks a lot!!!

[@narendrajadon8602]

You got amazing way of explaining concepts. Understood very easily. You didn't miss details while explaining the concepts in very less time. Keep it up :)

[@harigoudmogudala2191]

i have been searching for this type of course as an angular beginner you made each and every concept very easily understandable thank you so much and please make more videos by taking real time projects Vishwas if possible .you had great teaching skills

[@HenleyBailey]

Excellent explanation, thank you for explaining the reasons why rather than just what to do!

[@AkshayChavan-xn6wi]

I wish I could give a million likes to this video and a million subscriptions to this channel! You are a gem.

[@edduardoo]

Dude, you're the best! Thank you for these videos!

[@user-ri9cn2rs5i]

Fantastic video(s). Im subscribed to PluralSight but for some reason I find myself being able to focus and understand your way of explaining concepts much better. Thank you so much.

[@imarpit007]

Happy Guru Purnima Sir. I found your channel most information and helpful. Best teaching method 🙏🙏💐. I've learnt many things so far with your tutorials. 💐💐💐

[@Nono-hc1qx]

very clear to explain what is work. even my mother language is not english but its easier understanding! I really appreciate your angular series :)

[@AmitKumar-ju2pp]

Type '{ id: number; name: string; age: string; }[]' is not assignable to type 'never[]'. please check i got this error how to resolve

[@shalietta]

Thanks for the tutorials. They helped me understand Angular better and be able to finish my assignment :)

[@subramanyamchapala7362]

I am very lucky by finding the CODEVOLUTION videos. Thq sir

[@NinjaBroskieeeee]

Your tutorials are amazing brother !! May god bless you !! 🙏

[@saebalam2498]

Subscribing after watching just one video... So explanatory and doubt clearing ❤️

[@NaveenRawat51]

Great work Vishwas :-) ( you just forgot to import "service" in components and it took me 1 hour to fix it). keep it up

[@dakakrishnareddy4922]

Naveen Chaudhary hi, i am also getting same error, can you please ping how you fixed the issue?

[@sushantkumar8903]

@@dakakrishnareddy4922 just import service in the ts of the component

[@tiredoftheliesalready]

Considering that his examples worked every time he showed something, I am more likely to believe that either your IDE/Editor did not auto-populate something his did, or else, that something has changed in one of the major versions released since Vishwas recorded this series. Considering that I just followed this in VSCode with Angular 8 extensions, and everything worked fine, I heavily lean towards it being an IDE/Editor issue.

[@pol-dev-v5y]

@@tiredoftheliesalready I agree with you.

[@avishekram5010]

he is using an extension provided in visual studio code known as auto-import which automatically imports the service, he discussed this much earlier in the series

[@debiprasadpanda619]

It is always not necessary to add the service in the providers array in the app.module.ts. It simply depends on the use of a particular service and based on the that we can put it either at the individual component level or at the app component level or at the app module.

[@parrisgjerde9212]

I love this series. Absolutely fantastic.

[@1naeemkhan]

Awesome video and a thorough explanation. Now I fully understand how to implement a service.

[@vamshikrishna9020]

One of the best tutorials .Thanks a lot 😀😀

[@anshulloach5520]

best best best video lectures on Angular

[@cursedswordsman]

This is the only video on this topic I understood

[@akashdutta1620]

Hey you!! you deserve a medal man.

[@Atif1702]

Since Angular 6, services don’t need to be registered in a module anymore. More preferred in Angular 6 is to use @Injectable decorator and specify providedIn property //Angular 6 way import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class EmployeeService { }

[@franeklubi]

Thanks!

[@raabisliman]

your explanation makes hard principles so easy ! Thanks

[@maitreyshukla258]

Really, it's the great tutorial for Angular.

[@tejashripaithankar2842]

Hi, Your videos are very helpful , for beginer like me

[@MrBdoleagle]

the best tutorial video about angular!

[@annajohn7514]

Can u pls release the remaining videos........u r an amazing tutor

[@grarthee]

Awesome to the point video, but @Injectable explanation is quite misleading when compared to the Angular doc. please check and correct if required.

[@sheep3966]

Thank you so much for making these tutorials! They are fantastic and I love them.

[@kathiravant1668]

u r a good tutor......expecting more examples on Services

[@cursedswordsman]

ADDENDUM: if you access it via the 'viewProviders' in the @Component instead of 'providers', then it will only be visible for the immediete component, not the component's children

[@seclvded]

holy sh*t, thank you! i just got it. i've been confused about dependency injection and i just got it. thank you!

[@sasidharan6073]

actually the code works even if we have not included the employeeservice in appmodule, just creating employeeservice and including it in the employee-list and employee-details work fine. why???

[@rick_info_dev_pyt]

Thanks friend BUT : please don't forget to mention, that the decorator : "@Injectable()" above the service class, is only necessary if the service itself needs to receive Dependencies into its own constructor. I mean, in your example, it would also work fine, if you would not mention this decorator above the service class ! We also could mention though, that since Angular 6, the service itself can register to the root of the module, as injectable, by having this kind of decorator above its class : "@Injectable({ providedIn: 'root'})", this is not very logic, but that's the way Angular Developers have chosen. The advantage in this last case, is that this the service itself that register to its root module, and so it doesn't need anymore to be mentioned into the providers : [...], of the (root) module.

[@hardikmotwani282]

You are creating an instance of Employee service in the params of the constructor, how that instance is accessible in ngOnInit as well? And why we are creating instance of service class in params? We could have done that inside constructor.

[@irene693]

You are doing a great job with these tutorials!

[@adifitrianto4640]

I gotta say, this is the best tutorial ever, thanks an

[@lacramioaracorneanu6271]

Superb explanations! thank you!

[@rajvardhankhandekar9055]

Thank you so much for explaining services with such ease. More power to you.

[@avishekram5010]

those who are using angular 10 and above, you might have to make your getEmployees() function public for it to work.

[@subratkumarbarik8896]

Best online tutorial

[@stefanioan7569]

Awesome material. How and when did you created the employee-list and employee detail components?

[@kwstaslalaounis3212]

Thank you for your videos you are perfect.

[@sangeethakesavan]

best tutorial for angular!

[@aliraza9511]

Great Sir! Well done

[@zakariamouqcit4975]

This is a great tutorial! Yet have a small problem with importing the employeeService into employee-list and employee-detail components. It is weird cause I didn't have this problem while importing it to the app.module. Did any one have to deal with this issue?

[@tejashripaithankar2842]

Sir please make one video on life cycle hooks in angular

[@c-sharptricks9899]

you made angular simplest for me

[@spragucm]

Excellent work

[@bt9604]

How to get that local host ? Typed code in vs code Then what

[@bhuwaneshpareek]

Dude, you are brilliant!! hats off

[@vinayn9110]

good video, to the point and easy to follow. Thank you for uploading.

[@SalmanShaikh-ot2nr]

Sir thank you so much for this simple and understandable explanation.

[@amitbhardwaj3229]

Thanks for all information. Is Service and web api similar here ? can we use any outside web api service here ?

[@rhoadie]

I did it!! thank you!!! great great lesson!

[@mohantalachutla6834]

First of all, I enjoyed your tutorials. I read the docs, came here to see if I understood them correct. I feel you are wrong about this. @injectable is to tell angular that it needs create a singleton object a of class in ioc container. So that it can inject whenever we request for a object of that class using constructor or @inject. But not something else can be injected in it.

[@mcspraint4591]

Use public employees=[] as any

[@t.manikantareddy8681]

Superb Teaching.

[@asfandalikhan6269]

What a marvelous explanation. You are amazingly incredible :)

[@tuhin79]

I should have given more than 1 likes. But there is no option :( ................Really a great job. Thanks a lot!

[@Rithus2020]

Rocking.Thanks a lot a worth Tutorial in Angular.

[@Gauravkumar-jm4ve]

Awesome video thank u so much please keep doing

[@gmonilg]

There is more in decorator for services in angular 6... This is not covered... This might be previous angular series attached to angular 6

[@shuvajitmohanty9595]

Can u please provide a any link for that..

[@erickkisreal9398]

6:36 is where he talks about the injectable() decorator

[@swapnilsarnaik7572]

thanks for the video can u also help for create delete and update with service ..also the is it possible to save the data after next to main page

[@sridharboomi2292]

when will u release the next videos.. good work... keep it up

[@zayanmakar11]

thank you very much .it's awesome

[@priyankaravichandran851]

Awesome tutorials

[@naveenreddydepa8324]

Awesome tutorial. The way of explanation is good. Here I have one question to ask.While injecting service in to component constructor, we use private access modifier. If i dont use any access modifier its returning error.Can anybody help me on this

[@mazyarbehnahd5551]

Than you very much , i like you man and the way that you teach :)

[@skilljourney6357]

Great toturials

[@SofianMW]

thanks Vishwas you do i good job

[@sonamohialdin3376]

So good tutorial thank you

[@janardhancv1127]

I was hoping that you cover the new feature of angular 6 service injection using @Injectable({ providedIn: 'root', })

[@vandanasaini3520]

what does it mean of provideIn :root ?

[@avi12]

8:13 It becomes a JavaScript class, not a TypeScript class

[@Rakatashii]

great job on this vid, very helpful

[@Kronos4]

I have a question how can we send data from one component to the service and then display in another component?

[@santhosh15070]

Excellent

[@sreyak6310]

Service must be imported within the component also, it's missing In the video which gives an error 'all parameters cannot be resolved'

[@AbhijitChandekar]

Hi, are you talking about video 19? I can't even see the video because, it only has audio it seems and a static constant screen. So we need to pay? I don't see an option to pay as well :(

[@AshishKumar-em1li]

why i can't see the employee name and employee detail after writing the same code. my localhost:4200 page is fully empty

[@biagiola]

I'd have the same problem. Cut and paste the same template

[@sivapavanik8284]

@@biagiola even i got stuck with the same problem

[@sivapavanik8284]

i tried but it didnt worked

[@dradha768]

Solution: You might not saved the "app.module.ts " file after registering with EmployeeService in the Provider[ ] Array.

[@dradha768]

or You have to add selectors ( and )in the app.component.html

[@Александр-ю9о2ш]

So the sirvices in angular is like interfaces in oop? Bcz it can be implemented by any component and use it functionality

[@gayathrivineeth5908]

there is an error at the initialization of array in child component. could you please tell me a solution

[@sandy359sandy]

Such a great video. I was following your class. Now I have a problem. I have imported Employeesservice in app.module.ts and added the line of code in Providers. But while try to create an instance in component page - private employeesService: EmployeesService ; am getting an error - unable to locate EmployeesService. So I have imported the Employeesservice locally in componet file and its working perfectly. Please help.

[@rafaellauxen3577]

Nice tutorial!

[@AbhijitChandekar]

Hi, for me the videos from 19 to beyond are only audio. Do we need to pay to watch them? Where to pay ?

[@gobinathb8032]

awesome tutorials. i'm having a doubt why instead of creating service, can we create input,output injector? as you explained in tutorial 15. ie. using that can we call the employee details in employee-details component is it right method? what is the difference ? and how to create child components of specific component instead of parent as app component.

[@JudenB2]

did you find your answer ?

[@gobinathb8032]

nope

[@paudeldipesh]

For your last question app component is the main root component of the angular app you are going to build and all the other components must reside under the app component. As my knowledge to keep running your angular application you must create your component as a child of app component and further you can make child components under the any component which is eventually a child component of the app component. .

[@daviddonadze221]

Thank you so much for this video.

[@GaneshPatil-dl8tm]

good content. When your adding content for dynamic forms.