DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

Creating Service In Angular Using CLI/Manually

#angular #service

Create the Service using CLI 

ng generate service <service-name>
Enter fullscreen mode Exit fullscreen mode

Structure : 

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class <service-name> {

  constructor() { }

}
Enter fullscreen mode Exit fullscreen mode

Create the Service Manually

To create a new service manually:

  1. Navigate to your Angular project directory.
  2. Create a new file, <service-name>.service.ts
  3. At the top of the file, add the following import statement. 
import { Injectable } from '@angular/core';
Enter fullscreen mode Exit fullscreen mode
  1. Add @Injectable() service 
@Injectable({
  providedIn: 'root',
})
Enter fullscreen mode Exit fullscreen mode
  1. Add a class statement that includes the code for the component with constructor. 
export class <service-name> {

  constructor() { }

}
Enter fullscreen mode Exit fullscreen mode

  1. Using service in component, first need to Inject in constructor like this :

    Add a private  ex : heroService parameter of type HeroServiceto the constructor.

// example
constructor(private heroService: HeroService) {}
Enter fullscreen mode Exit fullscreen mode 
  Next Import :
Enter fullscreen mode Exit fullscreen mode 
// example
import { HeroService } from '../hero.service';
Enter fullscreen mode Exit fullscreen mode
  1. Need to add in <app.module.ts> like this : 
// example
@Component({
  /* . . . */
  providers: [HeroService]
})
Enter fullscreen mode Exit fullscreen mode

and import in it.

// example
import { HeroService } from '../hero.service';
Enter fullscreen mode Exit fullscreen mode

Reference :

Angular Service

Live Example :

Stack Blitz

Top comments (2)

Collapse
 
temaovchinnikov profile image
TemaOvchinnikov •

My folder structure

ng generate directive|pipe|service|class|guard|interface|enum|component|module|interceptor

ng g directive directives/name-directive/name --skip-tests --skip-import --prefix=directive --export

ng g directive directives/name-directive/name --skip-tests --prefix=directive --export
ng g module directives/name-directive

ng g pipe pipes/name --skip-tests --skip-import
ng g service services/name --skip-tests
ng g class classes/name --skip-tests --type=class
ng g guard guards/name --skip-tests
ng g interceptor interceptors/name --skip-tests
ng g interface interfaces/name --type=interface rename NameInterface
ng g enum enums/name --type=enum rename NameEnum

ng g component components/name-component/name --skip-tests --export --flat --prefix=component
ng g module components/name-component 

ng g component components/layout-component/layout --skip-tests --export --flat --prefix=component
ng g module components/layout-component 

ng g component ui-kits/name-kit/name --skip-tests --export --type=kit --flat --prefix=kit
ng g module ui-kits/name-kit

ng g component elements/name-element/name --skip-tests --export --type=kit --flat --prefix=element
ng g module elements/name-element

ng g component pages/name-page/name --skip-tests --export --type=page --flat --prefix=page
ng g module pages/name-page --routing
Enter fullscreen mode Exit fullscreen mode
Collapse
 
manthanank profile image
Manthan Ankolekar •

👏

Read next

shhdharmen profile image

Video: How to share an Angular Component with URL

Dharmen Shah -

naveedahmed profile image

Incremental Hydration in Angular 19: Take Your App’s Performance to the Next Level

Naveed Ahmed -

peterkassenaar profile image

Metaframeworks for React, Angular and Vue

Peter Kassenaar -

aminkarimi_sis profile image

The Ultimate Guide to Cleaner and Smarter Route Data Binding For Angular Projects!

Amin-Karimi -