Angular Tutorial - 19 - Using a Service

📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - [e-mail]
Angular | Angular Tutorial for Beginners | Using a Service in Angular

[@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

[@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

[@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.

[@markchai8965]

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

[@Jeorgius]

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

[@edduardoo]

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

[@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.

[@mechadroit]

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

[@billbortkevich2300]

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

[@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

[@ranietukuri2430]

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

[@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 :)

[@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.

[@jaypatel2471]

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

[@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.

[@neopol7]

@@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

[@parrisgjerde9212]

I love this series. Absolutely fantastic.

[@cursedswordsman]

This is the only video on this topic I understood

[@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

[@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 :)

[@1naeemkhan]

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

[@subramanyamchapala7362]

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

[@shalietta]

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

[@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.

[@NinjaBroskieeeee]

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

[@anshulloach5520]

best best best video lectures on Angular

[@akashdutta1620]

Hey you!! you deserve a medal man.

[@raabisliman]

your explanation makes hard principles so easy ! Thanks

[@kathiravant1668]

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

[@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!

[@vamshikrishna9020]

One of the best tutorials .Thanks a lot 😀😀

[@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. 💐💐💐

[@sheep3966]

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

[@annajohn7514]

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

[@maitreyshukla258]

Really, it's the great tutorial for Angular.

[@irene693]

You are doing a great job with these tutorials!

[@saebalam2498]

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

[@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.

[@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???

[@MrBdoleagle]

the best tutorial video about angular!

[@tejashripaithankar2842]

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

[@rhoadie]

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

[@AmitKumar-ju2pp]

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

[@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.

[@kwstaslalaounis3212]

Thank you for your videos you are perfect.

[@lacramioaracorneanu6271]

Superb explanations! thank you!

[@adifitrianto4640]

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

[@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

[@vinayn9110]

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

[@mcspraint4591]

Use public employees=[] as any

[@aliraza9511]

Great Sir! Well done

[@rajvardhankhandekar9055]

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

[@Gauravkumar-jm4ve]

Awesome video thank u so much please keep doing

[@SalmanShaikh-ot2nr]

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

[@grarthee]

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

[@spragucm]

Excellent work

[@bt9604]

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

[@bhuwaneshpareek]

Dude, you are brilliant!! hats off

[@Rithus2020]

Rocking.Thanks a lot a worth Tutorial in Angular.

[@c-sharptricks9899]

you made angular simplest for me

[@sangeethakesavan]

best tutorial for angular!

[@asfandalikhan6269]

What a marvelous explanation. You are amazingly incredible :)

[@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?

[@santhosh15070]

Excellent

[@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.

[@subratkumarbarik8896]

Best online tutorial

[@zayanmakar11]

thank you very much .it's awesome

[@sonamohialdin3376]

So good tutorial thank you

[@stefanioan7569]

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

[@mazyarbehnahd5551]

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

[@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..

[@t.manikantareddy8681]

Superb Teaching.

[@erickkisreal9398]

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

[@immuterqqq5373]

Great 👍

[@skilljourney6357]

Great toturials

[@avishekram5010]

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

[@Rakatashii]

great job on this vid, very helpful

[@tejashripaithankar2842]

Sir please make one video on life cycle hooks in angular

[@SofianMW]

thanks Vishwas you do i good job

[@deepaksingh-ve8uh]

We have to import EmployeeService using... import {EmployeeService} from './../employee.service';

[@rachnasingh8976]

It is not woeking yet.please check if it is working

[@tuhin79]

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

[@priyankaravichandran851]

Awesome tutorials

[@daviddonadze221]

Thank you so much for this video.

[@HongKimhia]

Thanks

[@rafaellauxen3577]

Nice tutorial!

[@EduardKaresli]

Very nice tutorial!

[@ahmadsy611]

Brilliant!! many thanks :)

[@nileshjagtap8879]

Hi, a query regarding 'to pass data from component to service and access in another component using same service' I have 2 components and need to pass data between them. Can I use service to pass data between them. Here we can see data from service to component is flowing, but what about vice versa ? can I update data of service object. what I need to do is pass json object amongst components. Can you / anyone help please ?

[@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

[@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 ?

[@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 :(

[@amitbhardwaj3229]

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

[@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. .

[@awadkab9828]

You are the best...Thanks

[@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.

[@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

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

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

[@viveksingh8257]

Thank u bro ....