{"flag":true,"single":true,"pageTitle":"Services in Angular | Services Create in Angular step by step | Angular 15+","post":{"id":73,"user_id":"1","slug":"services-in-angular-services-create-in-angular-step-by-step-angular-15--ebsg","title":"Services in Angular | Services Create in Angular step by step | Angular 15+","body":"

A Service is a re-usable TypeScript class that can be used in multiple components across your Angular application. Services can be used to handle tasks such as data manipulation, data fetching from APIs, communication between components, user authentication, logging, or any other feature<\/strong> that is not directly tied to a single component's view.<\/p>\r\n

    \r\n
  1. if we have 10 components with 10 buttons <button>Enroll<\/button><\/strong>. when user click on it we need to handle logic in every component. this is code duplication and difficult. so we make a new class and use that in every component that need it , to acheive this we need service.<\/li>\r\n
  2. Also Service get data from backend and used to provide that data to each component that need. <\/li>\r\n
  3. Using services we can communicate between components without @Input() Or @Output() decorator<\/strong><\/li>\r\n<\/ol>\r\n

    Creating A service:<\/strong><\/p>\r\n

    1.create a folder services and run below command inside that folder<\/p>\r\n

    ng generate service enroll<\/code><\/pre>\r\n
    2. create method inside service Services\/enroll.service.ts<\/strong><\/p>\r\n
    import { Injectable } from '@angular\/core';\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class EnrollService {\r\n  constructor() { }\r\n  onEnrollClick(title:string){\r\n    alert(\"Thanks for enroll in \"+title);\r\n  }\r\n}\r\n<\/code><\/pre>\r\n
    4. Add a new method in component where we want to use service ie app\/home\/home.component.ts <\/strong>also import service + create instance of service + call method of service<\/p>\r\n
    import { Component } from '@angular\/core';\r\nimport { EnrollService } from '..\/Services\/enroll.service';\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: '.\/home.component.html',\r\n  styleUrls: ['.\/home.component.css']\r\n})\r\nexport class HomeComponent {\r\n  title=\"Home View\";\r\n  OnEnroll(){\r\n    const enrollService = new EnrollService();\r\n    enrollService.onEnrollClick(this.title);\r\n  }\r\n}\r\n<\/code><\/pre>\r\n
    5. Bind method of component in view ie app\/home\/home.component.html<\/strong><\/p>\r\n
    <button (click)=\"OnEnroll()\">home works!<\/button><\/code><\/pre>\r\n
     <\/p>\r\n
    Click on this button, it will go to component and component call the serve and get responce.<\/p>","category_id":"13","is_private":"0","created_at":"2023-03-28T23:45:40.000000Z","updated_at":"2023-04-02T23:33:56.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"A Service is a re-usable TypeScript class that can be used in multiple components across your Angular application. Services can be used to h - Services in Angular | Services Create in Angular step by step | Angular 15+ (Updated: April 2, 2023) - Read more about Services in Angular | Services Create in Angular step by step | Angular 15+ at my programming site [SITE]","categories":[]}