{"flag":true,"single":true,"pageTitle":"Dependency injection in Angular | Get services without creating there instance manually","post":{"id":74,"user_id":"1","slug":"dependency-injection-in-angular-get-services-without-creating-there-instance-manually-jmbn","title":"Dependency injection in Angular | Get services without creating there instance manually","body":"

Dependency: <\/strong>every code or module that is need of component is component dependancy because component need that.
we create instance of service to use that service but using dependncy injection we can use that service directly without creating its instance 
that istance is provided by angular depency injection to components that need it.<\/p>\r\n

Dependency Injection<\/strong> is a technique in which a class receives its dependencies from external sources rather than creating them itself.<\/p>\r\n

1. create constructer and pass its parameter with service class name 
2. in component decurator add that service using providers
3. use that instance using this.variablename<\/p>\r\n

home.component.ts<\/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  providers:[EnrollService]\r\n})\r\nexport class HomeComponent {\r\n  constructor(private enrollService:EnrollService){\r\n  }\r\n  title=\"Home View\";\r\n  OnEnroll(){\r\n    this.enrollService.onEnrollClick(this.title);\r\n  }\r\n}\r\n<\/code><\/pre>\r\n
home.component.html<\/p>\r\n
<button (click)=\"OnEnroll()\">home works!<\/button><\/code><\/pre>\r\n
app\/Services\/enroll.service.ts<\/p>\r\n
import { Injectable } from '@angular\/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class EnrollService {\r\n\r\n  constructor() { }\r\n  onEnrollClick(title:string){\r\n    alert(\"Thanks for enroll in \"+title);\r\n  }\r\n}\r\n<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-28T23:58:08.000000Z","updated_at":"2023-03-28T23:58:08.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":"Dependency: every code or module that is need of component is component dependancy because component need that.we create instance of service - Dependency injection in Angular | Get services without creating there instance manually (Updated: March 28, 2023) - Read more about Dependency injection in Angular | Get services without creating there instance manually at my programming site [SITE]","categories":[]}