8. Services Basics

 

Step1: Creating Angular Service

The angular service is composed of three things. You need to create an export class and you need to decorate that class with @Injectable decorator and you need to import the Injectable decorator from the angular core library. The syntax to create angular service is given below.


Let say you want to create an angular service for fetching the student details and this student details is going to be used by many components. So, open terminal and type ng generate service Student and press enter as shown below.


ng generate service student


// student.service.ts


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

import { Observable, of } from 'rxjs';


@Injectable({

  providedIn: 'root', // This ensures that the service is a singleton and can be injected throughout the app.

})

export class StudentService {

  private students: Student[] = [

    { id: 1, name: 'John', grade: 'A' },

    { id: 2, name: 'Sarah', grade: 'B' },

    { id: 3, name: 'Mike', grade: 'C' },

    // Add more student details here

  ];


  getStudents(): Observable<Student[]> {

    return of(this.students);

  }


  getStudentById(id: number): Observable<Student | undefined> {

    const student = this.students.find((s) => s.id === id);

    return of(student);

  }

}


export interface Student {

  id: number;

  name: string;

  grade: string;

}

In this example, we've created an StudentService class that provides two methods:

  1. getStudents(): This method returns an Observable of an array of students.
  2. getStudentById(id): This method takes a student ID as a parameter and returns an Observable of the corresponding student's details.

Now, you can inject this service into your Angular components and use it to fetch student details. Here's an example of how to use this service in a component:


// student.component.ts

import { Component, OnInit } from '@angular/core';
import { StudentService, Student } from './student.service';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css'],
})
export class StudentComponent implements OnInit {
  students: Student[] = [];

  constructor(private studentService: StudentService) {}

  ngOnInit(): void {
    this.studentService.getStudents().subscribe((students) => {
      this.students = students;
    });
  }
}

In this component, we inject the StudentService and use the getStudents method to fetch the student details.

Remember to import and include the StudentService in your app module providers, and you can then use it in any other component where you need to access student details.

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

@Injectable()

export class StudentService {
  getStudents(): any[] {
    return [
      {
        ID: 'std101', FirstName: 'Preety', LastName: 'Tiwary',
        Branch: 'CSE', DOB: '29/02/1988', Gender: 'Female'
    },
    {
        ID: 'std102', FirstName: 'Anurag', LastName: 'Mohanty', 
        Branch: 'ETC', DOB: '23/05/1989', Gender: 'Male'
    },
    {
        ID: 'std103', FirstName: 'Priyanka', LastName: 'Dewangan', 
        Branch: 'CSE', DOB: '24/07/1992', Gender: 'Female'
    },
    {
        ID: 'std104', FirstName: 'Hina', LastName: 'Sharma', 
        Branch: 'ETC', DOB: '19/08/1990', Gender: 'Female'
    },
    {
        ID: 'std105', FirstName: 'Sambit', LastName: 'Satapathy', 
        Branch: 'CSE', DOB: '12/94/1991', Gender: 'Male'
    }
    ];




Comments

Post a Comment

Popular posts from this blog

1. a. Angular Application Setup

Observe the link http://localhost:4200/welcome on which the mCart application is running. Perform the below activities to understand the features of the application. Angular Application Setup: Install Node.js: Visit the Node.js website ( https://nodejs.org ) and download the latest version of Node.js. Follow the installation instructions specific to your operating system. PRebuilt software (2nd Pane) Install Angular CLI: Open a terminal or command prompt and run the following command to install the Angular CLI globally: npm install -g @angular/cli@13.0 Create a new Angular project: In the terminal or command prompt, navigate to the desired directory where you want to create your Angular project. Run the following command to create a new project named "mCart": ng new mCart Change into the project directory: Move into the newly created project directory by running the following command: cd mCart Serve the application: Start a local development server and s...
Read more

2. Structural Directives - ngIf

 2.a  Structural Directives - ngIf Create a login form with username and password fields. If the user enters the correct credentials, it should render a "Welcome <<username>>" message otherwise it should render "Invalid Login!!! Please try again..." message Step 1: Generate a new component ng generate component login step 2: Update the login component template Open the login.component.html file and replace its content with the following code: <div *ngIf="isLoggedIn; else loginForm"> <h2>Welcome {{ username }}!</h2> </div> <ng-template #loginForm> <form (ngSubmit)="submitForm()"> <div> <label for="username">Username:</label> <input type="text" id="username" name="username" [(ngModel)]="username" required> </div> <div> <label for="password">Password:</label>...
Read more

Assignments - 1

      1) A) Angular Application Setup          Observe   the   link   http://localhost:4200/welcome   on   which   the   mCart             application   is   running.       B)     Elements   of   Template Add   an   event   to   the   hello   component   template   and   when   it   is   clicked,   it   should   change the   courseName. 2)  A)    Components   and   Modules  Create   a   new   component   called   hello   and   render   Hello   Angular   on   the   Page B)     ngFor  Create a courses array and rendering it in the template using ngFor directive in               a list format 3)  ...
Read more