What's the difference between Service and Component in Angular 2+?

Question

They are declared in difference places (declarations and providers). I know that service has @Injectable() to be injected to constructor of components that use that service. But why does it have to be this way? Why can't we just declare in one place? What functionalities that one can do that the other cannot?

Answer 1

Component

It is basically a class with a decorator @Component which tells angular that the class is a component.

They are always associated with an HTML template and some CSS.

When a part of html gets repeated with a similar functionality it is always best to put it into a component. This component can be called where ever the same functionality is required.

Services

They are central units for some common functions across the application.

They are simple classes with functions and members.

Used when - Duplication of code exists, Access/store data.

No decorator exists for Services unlike @Component and @Directive. @Injectable is used only when one service needs to be used by a component, directive or another service.

Answer 2

I'm fairly new to Angular myself but here is my understanding.

Component

From the docs:

Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

Basically, a component is a small chunk of HTML, CSS, and Javascript that encapsulates some part of your application that you want to display.

Service

A service provides functionality that you can use across multiple parts of your application. Say you want to show specific information about a User across multiple components, but don't want to repeat the code, you would put that code into a service. You would then inject the service in your component and call the User showing code within the component, from the service.

The @Injectable() decorator is used when you want to inject other services within the service being decorated, and you do not need to include it when you are using the service in your component.

Answer 3

Core Main Difference

"When we wanted to access the method of one component into another we have to create the object and access it. But, @Injectable tells us or methods of Service we can access just by Injecting Service in Constructor() Because of Service is Singleton I am repeating Service is Singleton. i.e. only one object of each services is available in whole application.

Example: constructor( private http: HttpClient , private toastService: ToastService)

here I'm just created variable to HttpClient type and accessing get/ post/ put methods. ToastService is my private service to access my own services.

Component

Hope you know, In AngularJS we used to write seperate script.js file for handling event, writing methods, calling api or validation and then we access that file in html like this

we uses @Component for Component. So, Component is just Like script file with added extra features. such as, We can export component and use it anywhere in application, Angular 2 Provided Object oriented features and rather than import external script, css files, they have provides support for that etc.

    @Component( {
        selector: 'app-unit',
        templateUrl: './unit.component.html',
        styleUrls: ['./unit.component.css']
    } )

    export class MyComponent implements OnInit { 
    constructor( private http: HttpClient , private toastService: ToastService) { }

    ngOnInit() {
        this.fetchAllUnit();
    }
}

Services

We uses @Injectable for services. Services are used for common methods for some common functions across the different Component. They are simple classes with functions and members not html content. Used when - wanted to reduce duplication of code, to access or store data.

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

@Injectable( {
    providedIn: 'root'
} )
export class ToastService {

    constructor() { }

    public error( msg ) {

        M.toast( { html: msg, classes: 'red darken-2 rounded' } );

    }
    public success( msg ) {
        M.toast( { html: msg, classes: 'green lighten-1 rounded' } );

    }

    public warning( msg ) {

        M.toast( { html: msg, classes: 'yellow darken-4 rounded' } );

    }
}