Angular Learning : Practicing Services

Here we are having an angular app with 2 components, active users and inactive users. There are initially 2 active users and 2 inactive users. We can switch the users between active and inactive by using a clickable Set to active and Set to inactive.
The objective is to create a service and obtain the same result.
Active users code : 
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-active-users',
  templateUrl: './active-users.component.html',
  styleUrls: ['./active-users.component.css']
})
export class ActiveUsersComponent {
  @Input() users: string[];
  @Output() userSetToInactive = new EventEmitter<number>();

  onSetToInactive(id: number) {
    this.userSetToInactive.emit(id);
  }
}
<h3>Active Users</h3>
<ul class="list-group">
  <li
    class="list-group-item"
    *ngFor="let user of users; let i = index">
    {{ user }} | <a href="#" (click)="onSetToInactive(i)">Set to Inactive</a>
  </li>
</ul>
So this component lists the user and there is a clickable which sets the user to inactive.
Inactive users code : 
import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-inactive-users',
  templateUrl: './inactive-users.component.html',
  styleUrls: ['./inactive-users.component.css']
})
export class InactiveUsersComponent {
  @Input() users: string[];
  @Output() userSetToActive = new EventEmitter<number>();

  onSetToActive(id: number) {
    this.userSetToActive.emit(id);
  }
}
<h3>Inactive Users</h3>
<ul class="list-group">
  <li
    class="list-group-item"
    *ngFor="let user of users; let i = index">
    {{ user }} | <a href="#" (click)="onSetToActive(i)">Set to Active</a>
  </li>
</ul>
Same way as active users, here when the clickable is clicked, the user is sets to active.
App component 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  activeUsers = ['Max', 'Anna'];
  inactiveUsers = ['Chris', 'Manu'];

  onSetToInactive(id: number) {
    this.inactiveUsers.push(this.activeUsers[id]);
    this.activeUsers.splice(id, 1);
  }

  onSetToActive(id: number) {
    this.activeUsers.push(this.inactiveUsers[id]);
    this.inactiveUsers.splice(id, 1);
  }
}
Making use of services :
We can obtain the same using services. All we have to do is create a new service and use these services in the component.
Creating a new service
We can use the command ng g s <servicename> to create new service.
  • user-service.service.ts 
    • import { Injectable } from '@angular/core';
import { CounterService } from './counter.service';

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

  constructor(private counterService : CounterService) { }

  activeUsers = ['Max', 'Anna'];
  inactiveUsers = ['Chris', 'Manu'];

  setToActive(id: number) {
    this.activeUsers.push(this.inactiveUsers[id]);
    this.inactiveUsers.splice(id, 1);
    this.counterService.incrementActiveToInactiveCounter();
  }

  setToInactive(id: number) {
    this.inactiveUsers.push(this.activeUsers[id]);
    this.activeUsers.splice(id, 1);
    this.counterService.incrementInActiveToActiveCounter();
  }

}
  • counter.service.ts 
    • import { Injectable } from '@angular/core';

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

  activeToInactiveCounter = 0;
  inActiveToActiveCounter = 0;

  incrementActiveToInactiveCounter() {
    this.activeToInactiveCounter++;
    console.log("Active to Inactive Count:" + this.activeToInactiveCounter);
  }

  incrementInActiveToActiveCounter() {
    this.inActiveToActiveCounter++;
    console.log("Inactive to Active Count:" + this.inActiveToActiveCounter);
  }
  constructor() { }
}
  • active-user-component.ts 
    • import { Component, OnInit } from '@angular/core';
import { UserServiceService } from '../user-service.service';

@Component({
  selector: 'app-active-users',
  templateUrl: './active-users.component.html',
  styleUrls: ['./active-users.component.css']
})
export class ActiveUsersComponent implements OnInit{
  users: string[];

  constructor(private userService:UserServiceService){}
  onSetToInactive(id: number) {
    this.userService.setToInactive(id);
  }

  ngOnInit() {
    this.users = this.userService.activeUsers;
  }
}
  • inactive-user-component.ts 
    • import { Component, OnInit } from '@angular/core';
import { UserServiceService } from '../user-service.service';

@Component({
  selector: 'app-inactive-users',
  templateUrl: './inactive-users.component.html',
  styleUrls: ['./inactive-users.component.css']
})
export class InactiveUsersComponent implements OnInit{
  users: string[];

  constructor(private userService: UserServiceService) {}

  onSetToActive(id: number) {
    this.userService.setToActive(id);
  }

  ngOnInit() {
    this.users = this.userService.inactiveUsers;
  }
}
  • app-component.ts 
    • import { Component } from '@angular/core';
import { UserServiceService } from './user-service.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [UserServiceService]
})
export class AppComponent {

}
    So this is a simple use case for the usage of service.

    GitHub logo Rohithv07 / Extra-Material-For-Angular

    Covering some features with more hands on

    Extra-Material-For-Angular

    Covering some features with more hands on

    npm install --save-dev @angular-devkit/build-angular

    npm install --save bootstrap@3

    Data Binding

    Directives

    ngFor, ngIf, ngStyle, ngClass

    Using renderer

    Using HostListener

    Using HostBinding

    Building structural directive

    Services

    Logging Service and injecting

    Data Service

    Injecting Services into Services @Injectable()

    Services for Cross - component communication

    Routing

    Setting and loading routes

    Router Links

    Navigation Paths and styling active router links

    Passing parameters to Routes

    Fetch Route parameters, also Reactively

    Query paramaters, Fragments

    Nested Routes

    Redirecting and wildcards

    Guards

    >> canActivate
>> canActivateChild
>> Fake auth service and canDeactivate

    Passing static data to route

    Resolve Guard

    Location startergies useHash: true

    Observables

    Undestanding angular observables

    Custom observables

    Data, Errors, Completion

    Operators, Subject

    Forms

    Template Driven vs Reactive

    Template Driven

    Creating form

    Accessing form with @ViewChild

    Validation and validation error

    ngModel with two way binding

    Grouping form controls

    Radio buttons

    Resetting forms

    Reactive Approach

    Creating a form

    Syncing HTML…

    View on GitHub

    36

    Categories:

    AngularTypescriptJavascript

    Tags:

    AngularTypescriptJavascriptWebdev

    This website collects cookies to deliver better user experience

    Angular Learning : Practicing Services