Angular 9 Tutorial For Beginners #58- Services

[@mdshabbiralam21]

This is how you teach❤️. I have seen the video from Udemy, they are good but it was easy for me to understand by your explanation . Thank you. Finally understood what Service is.

[@ARCTutorials]

Glad to hear that

[@themysteryman-e2j]

Really Really great channel for angular. Your way of explaining the concept is another level. I'll definitely suggest this channel to all my friends. Appreciate your hard work.

[@ARCTutorials]

Thanks Varaprasad. Appreciate your kind words

[@sreenuksr]

Angular 9 Tutorial For Beginners #58- Services - Services allow us to create reusable common shared functionality between various models and components - Services are singleton - Services are injected into the application using DI mechanism - Services are commonly used for making HTTP requests to our endpoints to request and receive the response - A service can have value, methods, or a combination of both! - Unlike components, services need not be included in your modules - We can create any number of services - Importing and Injecting services into components are called dependency injection - Services are injected at runtime, this way code becomes highly efficient and easy to maintain - ng generate service - import {Injectable } from '@angular/core'; - We can generate the service in any of the folder we want - but best practice is always to keep all services related into modules - @Injectable decorator inform to angular that we can inject it into components - The service is ProvidedIn "root" will be available across the application - can be injected into any component - Make the service as public in the constructor so that you can call the service method from template(html) as well. Example: Contacts Module - Create Contact - View Contact - Edit Contact - Delete Contact Contact Services - HTTP - Processing Data - Cleaning Data services.ts import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class ContactsService { constructor() { } getContacts() { const contactList=[ {ContactId:1, ContactName:'James'}, {ContactId:2, ContactName:'Clark'}, {ContactId:3, ContactName:'Ruby'}, {ContactId:4, ContactName:'Jack'} ] return contactList; } callingFromTemplate() { console.log('calling from template'); } } component.ts import { Component, OnInit } from '@angular/core'; import { ContactsService } from '../contacts.service'; @Component({ selector: 'app-contacts', templateUrl: './contacts.component.html', styleUrls: ['./contacts.component.scss'] }) export class ContactsComponent implements OnInit { _contacts = []; constructor(private contactservice: ContactsService) {} ngOnInit(): void { this._contacts = this.contactservice.getContacts(); } } component.html List Of Contacts {{contact.ContactId}} - {{contact.ContactName}} Calling From Template

[@ARCTutorials]

Thanks Sreeni.

[@Empower-YouTube]

thanks sreenu

[@jacksm8709]

thanks a lot, this clears the questions I had asked earlier... as usual simple and straight to the point. thanks.. missing tutorials 56 and 57

[@ARCTutorials]

Hi Jacks. Yes uploading few tutorials today. Thanks Sridhar

[@mohamedibrahimabdulghani5514]

Thank you man, how do I select the item to display from the list or from the array ?

[@amanuellebassi7294]

Thanks Sridhar. Awesome explanation! I am enjoying it. Thank you for taking your precious time. I will follow you all the way!

[@ARCTutorials]

Thank you Amanuel 🙏🙏

[@kiranshelar2961]

The quality of this content is simply amazing 👏🏻 learning so much, thankyou!

[@ARCTutorials]

Happy to hear that!

[@rajujeelaga5196]

Your explanation is very clear bro, thanks a lot for the Tutorials 👏 Waiting for CRUD operation videos in Angular...

[@ARCTutorials]

Thank you Raju for your kind words. Thanks for watching. 🙏

[@Nadh_Zulki]

Hi sir. I'm a newbie in programming. Really the best tutorial so far I've been watching. The way you explain is very easy to understand compared to Udemy. Currently, I've been assigned in a project on my work using Angular 10 sir. I hope that you can provide more tutorials on that. I've been watching the tutorial for Angular 10 that you posted. So excited to know more about programming and from all your tutorials. Greetings from Malaysia ❤️

[@ARCTutorials]

You are welcome!

[@shirish757]

I am little confused as we can use services as shared service which we can use in multiple components using dependency injection then can we use the same service to publish and subscribe.

[@ARCTutorials]

Hi Shirish. I didnt quite follow your question. Can you pls elaborate it for me?

[@chiragsolanki2215]

Really Your tutorial is great for everyone.Please share your notes which is created while learing .

[@ARCTutorials]

Hi Chirag. Thanks for your kind words. Please drop me a note at [e-mail]

[@Sn-kd2ty]

ur Teaching is on another level,Im subscribing

[@omkarmore2198]

You are more than any teaching classes..

[@ARCTutorials]

Thank you so much Omkar

[@vicsaisan4349]

Excellent tutorial. Well explained 👍

[@kamalmohansinghrana1381]

in case we are creating frontend on angular and backend on spring and errors occur on validation on server side (in case user manipulate front end) then how we show those errors in our angular controller error

[@ARCTutorials]

Hi Kamal. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@mrinaltewary]

Nice and Simple Explanation

[@ARCTutorials]

Thank you so much 🙂

[@overflowingworld7291]

Pls how do I create a service for url.. Assuming I want to move the url from my source code to a centralized location (service) for easy iteration and testing

[@sarojKumar-dv1dy]

Very nice tutorial ❤ and very useful

[@ARCTutorials]

Thank you so much Saroj for your kind words

[@antonioubedamontero2927]

I have a doubt. If we have three modules a, b, c and some of them use a service that imports inside It something (maybe http), where do we import that http that uses oír service?

[@rahulchopkar1333]

Thank you for this tutorial series 🙏. It's help's alot.

[@ARCTutorials]

Glad it was helpful!

[@veda803]

I love your videos. if the total angular course is available in udemy please share the udemy course URL

[@ARCTutorials]

Hi Veda. All my videos are free and hosted on KZbin only. Please do check out Angular 10 complete series as well. Also if you want, please consider buying me coffee www.buymeacoffee.com/arctutorials

[@veda803]

​@@ARCTutorials haa sure..seriously i love your tutorials...​

[@kaseepl]

Your tutorials are amazing. Great job

[@ARCTutorials]

Thank you so much for your kind words. Regards Sridhar

[@ayushipardeshi5294]

Amazing tutorial ,thankyou sir

[@ARCTutorials]

Glad you liked it

[@arunachinni8483]

I didn't get the output sir because there is how to write *ngFor let contact of contactList where r u from take ' contact'

[@ARCTutorials]

Hi Aruna. Can you please chck these updated tutorials on Angular 10 series. kzbin.info/www/bejne/i2iUeGZtaqaqbKc

[@poojahavaldar4873]

When I run program I couldn't see the contact list in the url I am just getting blank screen y so

[@ARCTutorials]

Hi Pooja. Can you pls send me screenshot of console error at [e-mail]

[@امیرحسینحسینی-س3ك]

Thank you

[@ARCTutorials]

You're welcome

[@AsadKhan-ux3tr]

hello sir if i have remove services after generation of service what will i do

[@ARCTutorials]

Hi Asad. We will have to remove it manually.

[@nikhilsingh8544]

sir is this series has full content of angular9 or not??

[@ARCTutorials]

Yes the series is complete Angular tutorials

[@shubhamsatpathy6489]

Can I write aws key and secret key in services or TS file

[@ARCTutorials]

Hi Shubha,. Secret keys are usually stored at server side like s3 secret manager etc. Its not good practice to store secret details in UI layer

[@rajatsharma949]

Hello, can I know that what is the what importance does void has in ngOnInit: void{}

[@ARCTutorials]

Hi Rajat. Please follow Angular 10 tutorial series as this will be covered again in detail and you can practice with me along. Please check Angular 10 tutorial series for complete learning kzbin.info/www/bejne/pXayYX6wjpacpsk

[@dhanrajnimalwar5472]

Don't we need to register our service in providers array?

[@AfolabiJude]

This channel deserves an award! Like if you agree

[@kalyanchatterjee8624]

Great video! I wish I live to see people calling '@' just "at" and not "at the rate".

[@ARCTutorials]

Thanks Mate!

[@gokhanc.5250]

perfect

[@ARCTutorials]

Thank you so much buddy!

[@gokhanc.5250]

thanks

[@ARCTutorials]

Thank you so much buddy!

[@sravaninuthi894]

Thank you sir I'm learning angular through your vedios. Could you teach us small project on angular sir

[@ARCTutorials]

Sure Srvani. Live project is starting this week. Hope you will like it

[@sravaninuthi894]

@@ARCTutorials sir could you send me the notes of routing concept to this mail [e-mail]

[@Dheerajkaruturi]

TS2534: A function returning 'never' cannot have a reachable end point. error in ts file done as you demostrated

[@vikaswin123]

Every video is excellent. can I contact you sir.

[@ARCTutorials]

Thank you so much Vikas. You can reach out to me at [e-mail]

[@byronk5]

Your content is fantastic-clear and to the point! Thank you for your efforts! Subscribed.

[@ARCTutorials]

Awesome, thank you!

[@MrFuture-96]

Thank you so much sir for each great video. I wish I could work for you someday to spend time in such a great Team of yours and I am proud of you saying, my Teacher :) Sir can you please make series on asp.net core using entity Framework and Dapper ORM with MSSQL with Angular 9

[@ARCTutorials]

So nice of you! Thanks for watching the videos. Regards Sridhar

[@ShishupalSingh-zb2sk]

hello sir, recently i had an interview with a company, i wanted to be in React, but they have selected me for angular? I have learned React, but have no idea about Angular. Though they are willing to give me 15 days to learn Angular? My query is is Angular Good as compared with React, as companies have started shifting to React due to its simplicity. Please reply

[@RizwanKhan-yn9yb]

Why I am getting this error Type '{ contactId: number; contactName: string; }' is not assignable to type 'never'. this.contactList=this.contactsService.getContacts();

[@ARCTutorials]

Looks like the type error on the contactList.

[@arunachinni8483]

I have one problem ,I didn't get the output because type '{Id: number.name: string; course: string;}'is not assignable to type'never'.

[@arunachinni8483]

What can I do now

[@arunachinni8483]

Which type I want to write? I can't understood

[@ARCTutorials]

Hi Aruna. Can you please email me the code snippet at [e-mail] also I would recommend you Angular 10 services tutorial. kzbin.info/www/bejne/i2iUeGZtaqaqbKc

[@amanagrawal7699]

I am using Two Security libraries msadalangular6 and angular-oauth2-oidc . Q1. I want to create a common service which has both the security libraries services namely Msadalangular6Service and OauthService, How can I crwtae that service. Q2. How do I retrieve the data of both the libraries services inside a common service that created above? Q3. Then I want to use that common service througout my application.

[@vinjamuripavankumar9833]

Why you use private and public in constructor..

[@cse_046_praveenkumar.a3]

Bro Im facing a type error while writing service ☹️

[@ARCTutorials]

Can you please share details on the error?

[@cse_046_praveenkumar.a3]

@@ARCTutorials Error: src/app/contacts/contacts.component.ts:16:5 - error TS2322: Type '{ id: number; name: string; }[]' is not assignable to type 'never[]'. Type '{ id: number; name: string; }' is not assignable to type 'never'. 16 this.contactsList=this.sampleService.getContacts() ~~~~~~~~~~~~~~~~~

[@mastvideos2355]

@@ARCTutorials //////Error: src/app/contacts/contacts.component.html:4:19 - error TS2339: Property 'contactName' does not exist on type 'never'. /////// same error to me. Please help

[@shivangijain9181]

this.contactList = this.contactsService.getContacts(); => this line shows error: "Type '{ contactId: number; contactName: string; }[]' is not assignable to type 'never[]'. Type '{ contactId: number; contactName: string; }' is not assignable to type 'never'.", Please check

[@ashekseum9301]

Use this: contactList = [] as any; ngOnInit(): void { this.contactList = this.contactsService.getContacts(); }

[@ChandeckTv001]

@@ashekseum9301 thanks man it actually solve my prob

[@vigneshvicky6720]

Bro I have one doubt...

[@ARCTutorials]

Yes sir

[@vigneshvicky6720]

@@ARCTutorials tq for taking look on me....how do I update any change in service from components.?? For example g=0 in service and component one changed g value to g=1 and when I called in component two it g value should be 1

[@ARCTutorials]

@@vigneshvicky6720 You will need to write a method in Service and call it Component to read/process the data

[@vigneshvicky6720]

@@ARCTutorials I already tried it but the value is not changed it remains same g=0 as I mentioned above...

[@suyogmoon3099]

Where is lecture 56 and 57

[@ARCTutorials]

Hi Suyog. I will add it to the playlist. In the meanwhile Also please check out Angular 10 series tutorial with much more use cases kzbin.info/www/bejne/fJiXpKOIa8iXeLM

[@mdshabbiralam21]

Where are 56th and 57th lectures?

[@ARCTutorials]

Hi Shabir. I will check and add the missing ones.

[@mdshabbiralam21]

@@ARCTutorials sure! it will be helpful to us and thank you.

[@ARCTutorials]

Sure buddy will do. Meanwhile you can continue on other tutorials and do let me know if u have any doubts. Regards Sridhar

[@mdshabbiralam21]

@@ARCTutorials yes sir, that's what I'm doing , currently I'm at 64th video. And i almost followed your playlist. And will continue It was really great help for me.❤️

[@امیرحسینحسینی-س3ك]

😍🙏

[@ARCTutorials]

You are most welcome buddy!!!

[@ashutoshmishra3492]

Sir after 55 ,the video is 58 where is 56,57?

[@fahadg111]

i dont understand this tutorial you not explain about contacts.component.ts file you only do it .

[@ARCTutorials]

Hi Bro. Can u pls check latest Angular 16 version tutorials? I have explained in detail everything

[@jorgelightwave]

Too many ads, too many writing notes and again, too many ads. A high price for a mid-level tutorial

[@ARCTutorials]

My apologies for too many ads. Its a way to support myself. I will try and reduce the number of ads. Apologies again for the inconvenience.

[@danielw1592]

Stop being a complainer. He is posting these tutorials for free. If you don't like it, go somewhere else.

[@jorgelightwave]

@@danielw1592 you have to reconsider your concept of free. Every ad you see is a price you pay and a little profit for publisher. I will complain if I have reasons to do it, that's what comments are for, among other things. PS: That's what I did. There are also sites that allow you to download KZbin videos without going through the ads, which is now my method for the abusive videos of this channel

[@ARCTutorials]

Dear Daniel, Jorge - i understand and respect both your views and feedback. Inhave already reduced the number of ads. I created this channel to share my knowledge and also to make friends here. We r all friends here. I love you both.

[@jorgelightwave]

@@ARCTutorials that's nice, thank you for reducing the number of ads