\n```\n\nThe base href tag in index.html isn’t something specific to Angular. It is an HTML tag which is used to specify the root of the resources, which includes but not limited to script inclusions, media files and style sheet locations.\n\n## What are services in Angular\n\nServices in Angular are nothing but JavaScript functions with its properties and methods that can be used by various components. If you need some specific tasks that need to be done, you could write a service for it and call it in every associated component.\n\nFor e.g., you could write a service that helps fetch data from the internet with the specified URL/ API. This service can then be injected in every component which needs the functionality of calling some internet or API URL to pull data.\n\n## How to create a service in Angular\n\nServices can be created using the Angular-CLI way or without. Let’s learn the both the CLI and non CLI way or manual way, as it teaches us the basic necessary steps to build a service and can help us debug if we hit any errors.\n\n### Creating an angular service manually\n\nBegin with creating the service file in your desired folder inside the app.\n\nService files end with filename and extension as “service.ts” (again, assuming you are using TypeScript).\n\nSo if your service is called the getdata service, you could name the file getdata.service.ts\n\nThe service file follows somewhat similar structure as components, but with different imports and decorator. A service has the same stuffs in the file- Necessary imports, Injectable decorator declaration and the Class with necessary methods or functions.\n\nImports: The service files needs a Injectable import from the angular core.\n\n```javascript\nimport { Injectable } from \"@angular/core\";\n```\n\nInjectable decorator: As similar to component decorator in Component files, we need to declare the @Injectable() decorator in services.\n\n```javascript\n @Injectable()\n```\n\nThe Service Class: Again, similar to the Class exports on the Component class, we need a similar class export for Services. This Class will include the functions and properties.\n\n```javascript\nexport class GetdataService {\n // Declare your functions and variables here.\n yourfunction() {\n return \"Hello!\";\n }\n}\n```\n\nAll your components and services file names needs to follow the appropriate case for class name.\n\nFor e.g., if your filename reads getdata.service.ts- > The corresponding Class name is GetdataService\n\n### Creating a service using the angular cli :\n\nWith Angular CLI the command to generate the service is quite simple.\n\n```javascript\n ng generate service servicename\n```\n\nOR the shortcut way\n\n```javascript\n ng g s servicename\n```\n\nWhere ‘servicename’ is the name of the service.\n\nThis generates the appropriate service file with the imports, decorator and the class name.\n\nYou’ll have to include the service in the NgModule decorator of app.module.ts – if all your components need to use this service. You can include the service in the specific component file too. Read below on how to use the service for more details.\n\n## Using a service in your Angular Components\n\nIn order to start using the service in your component, you first need to import it in your component’s imports.\n\nE.g.,\n\n```javascript\nimport { Component } from \"@angular/core\";\nimport { GetdataService } from \"./getdata.service\";\n```\n\nNext, you begin with providing the import inside the Component decorator. (This is optional if you provide it inside the app module which is accessible by all Components)\n\nE.g.,\n\n```javascript\n @Component({\n selector: 'my-app',\n template: '
Hello {{username}}!
\n```\n\nHere, any entry to the input field will sync with the view and render it besides “Hello”. On the other hand, if you manipulate the value in username using your components or say API for that matter, it would render it in the view and input field.\n\nAnother example for two way binding using a custom directive would be as below:\n\n```html\n{{someValue}}
\n```\n\nSo, that’s all folks. The above was a quick summary notes on the basics on Angular app. Now that we know some of these concepts, you can start with a new app using the cli and start tweaking it to build and use components and services.\n\nBest luck !\n",{"slug":"1o","title":"1p","date":"1q","cover":"1r","draft":"k","lead":"1s","author":"1t","tags":"1u","keywords":"1y","description":"1z","content":"20"},["1n","21"],"\u00132! vsis04955mc","/tags/angular/","\u0002q-4a658172.js#s_02wMImzEAbk[4 1! 7 6! 3p 2! 3 5!]","\u00032 e 25 #1","\u0002q-4a658172.js#s_fX0bDjeJa0E[4 3 5!]","\u0005https://itbusinesshub.com/tags/angular/",{"slug":"1d"},"Category angular","twitter:card","summary_large_image",{"name":"2b","content":"2c"},"twitter:domain","itbusinesshub.com",{"name":"2e","content":"2f"},"description","Categories angular",{"name":"2h","content":"2i"},"og:description",{"property":"2k","content":"2i"},"twitter:description",{"property":"2m","content":"2i"},"og:title",{"property":"2o","content":"2a"},"twitter:title",{"property":"2q","content":"2a"},"og:url","https://itbusinesshub.com/tags/angular",{"property":"2s","content":"2t"},"twitter:url",{"property":"2v","content":"2t"},"og:site_name","ITBusinessHub.com",{"property":"2x","content":"2y"},"og:type","website",{"property":"30","content":"31"},"ldjson","{\"@context\":\"http://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://itbusinesshub.com/#website\",\"name\":\"ITBusinessHub.com\",\"url\":\"https://itbusinesshub.com\",\"description\":\"Learn about software engineering, web development and how tech fits into the world of business. Welcome to ITBusinessHub.com. We talk about tech problems, solutions and dev tutorials.\",\"thumbnailUrl\":\"https://itbusinesshub.com/images/logo.png\"},{\"@type\":\"WebPage\",\"mainEntityOfPage\":{\"@type\":\"WebPage\"},\"isPartOf\":{\"@id\":\"https://itbusinesshub.com/#website\"},\"headline\":\"Category angular\",\"description\":\"Categories angular\",\"url\":\"https://itbusinesshub.com/tags/angular\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"ITBusinessHub.com\",\"url\":\"https://itbusinesshub.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://itbusinesshub.com/images/logo.png\",\"width\":\"32\",\"height\":\"32\"}}}]}",{"property":"33","content":"34"},["2d","2g","2j","2l","2n","2p","2r","2u","2w","2z","32","35"],[],[],{},"\u0002q-db5d8fed.js#s_O9AuKCs0SHo[b!]","\u00031 1 3a #d","\u0002q-94b0a93b.js#s_Kketg069kS0","n87ijy-0","w-6 h-6","\u0002q-9a89a1ec.js#s_UW0CfM9Datk","\u0002q-bec22664.js#s_76oreteZ1U8","\u0011g! @1","\u0011g! @2","\u0011g! @3","\u0011f! @4","\u0011i! @1","\u0011i! @2","\u0011i! @3","\u0011h! @4","\u0001"],"subs":[["_2","0 #8 isRenderedOnLightBackground"],["0 #c menu"],["0 #f vsis04955mc"],["0 26"],["0 26"],["1 #3 15 #2 href","0 #f params"],["0 #2 frontmatter","0 #2 title","0 #2 meta","0 #2 links","0 #2 styles"],["0 #4"],["0 #8 theme"],["0 #a isExpanded"],["_2","0 #d isRenderedOnLightBackground"],["0 #d theme"],["_2","0 #c isRenderedOnLightBackground"],["_2","0 #a isRenderedOnLightBackground"],["_2","0 #m posts"],["_2"],["_2","1 #o 3h #n href","3 #p 3i #p","1 #r 3k #q dateTime"],["_2"],["_2","1 #v 3l #u href","3 #w 3m #w","1 #y 3o #x dateTime"]]}