Angular allows you to create services, which are classes that are created for a single purpose. In our project, we have added all of our logic for flash in AppComponent. Suppose we wanted the flash data deep down in the component tree—we would have to pass it down from one component to another. Services make communication between multiple components easier and reduce the logic inside them.
Let's use the Angular Console to generate a service by going to the Generate tab in the side menu, and select Service, and name it as flash and click Generate.
This should create two files: flash.service.ts and flash.service.spec.ts, respectively.
Let's transfer all the logic for flash in the service:
import { Injectable } from '@angular/core';
import { IFlash } from './flash.model';
function getRandomNumber() {
return Math.floor(Math.random() * 10000)
}
@Injectable({
providedIn: 'root'
})
export class FlashService {
flashs: IFlash[] = [{
question: 'Question 1',
answer: 'Answer 1',
show: false,
id: getRandomNumber(),
}, {
question: 'Question 2',
answer: 'Answer 2',
show: false,
id: getRandomNumber(),
}, {
question: 'Question 3',
answer: 'Answer 3',
show: false,
id: getRandomNumber(),
}];
addFlash(flash: IFlash) {
this.flashs.push({
...flash,
show: false,
id: getRandomNumber(),
});
}
toggleFlash(id: number) {
const flash = this.flashs.find(flash => flash.id === id);
this.flash.show = !this.flash.show;
}
deleteFlash(id: number) {
const index = this.flashs.findIndex(flash => flash.id === id);
this.flashs.splice(index, 1);
}
rememberedChange(id: number, flag: string) {
const flash = this.flashs.find(flash => flash.id === id);
flash.remembered = flag;
}
updateFlash(id, updatedFlash: IFlash) {
const flash = this.flashs.find(flash => flash.id === id);
flash.question = updatedFlash.question;
flash.answer = updatedFlash.answer;
}
getFlash(id: number) {
const flash = this.flashs.find(flash => flash.id === id);
return flash;
}
}
We will update AppComponent so that it uses the service accordingly:
import { FlashService } from './flash.service';
export class AppComponent {
flashs;
constructor(private flashService: FlashService) {
this.flashs = this.flashService.flashs;
}
handleSubmit(): void {
this.flashService.addFlash(this.flash);
this.handleClear();
}
handleClear() {
this.flash = {
question: '',
answer: '',
};
this.flashForm.reset()
}
handleToggleCard(id) {
this.flashService.toggleFlash(id);
}
handleDelete(id) {
this.flashService.deleteFlash(id);
}
handleEdit(id) {
this.flash = this.flashService.getFlash(id);
this.editing = true;
this.editingId = id;
}
handleUpdate() {
this.flashService.updateFlash(this.editingId, this.flash);
this.handleCancel();
}
handleCancel() {
this.editing = false;
this.editingId = undefined;
this.handleClear();
}
handleRememberedChange({ id, flag }) {
this.flashService.rememberedChange(id, flag);
}
}
We have injected the FlashService by specifying a constructor flashService variable with the dependency type.
Now that we have all the logic transferred from a component to a service, let's look at observables in the next section, and see how they can be used in our application to optimize our components.