Hey there! I'm currently working on updating a boolean value in my service when a button is clicked within my component. My goal is to trigger the setfunction and toggle the boolean value from true to false, and vice versa when the button is clicked again.
Service
import { Injectable } from "@angular/core";
import { Melding } from "./melding";
import { Subject } from "rxjs";
@Injectable({
providedIn: "root"
})
export class MeldingService {
checkedChange: Subject<Boolean> = new Subject<Boolean>();
private meldingen = new Array<Melding>(
{ id: 1, name: "Zinc verstopt Machine A", checked: false, roleId: 1 , beschrijving: "Ga de machine maken. dit is de beschrijving lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum "},
{ id: 2, name: "Storing Machine A", checked: false, roleId: 1 , beschrijving: "Ga de machine maken. dit is de beschrijving"},
{ id: 3, name: "Zinc verstopt Machine B", checked: false, roleId: 2 , beschrijving: "Ga de machine maken. dit is de beschrijving"},
{ id: 4, name: "Storing Machine B", checked: false, roleId: 2 , beschrijving: "Ga de machine maken. dit is de beschrijving"},
{ id: 5, name: "Defect Machine B", checked: false, roleId: 2 , beschrijving: "Ga de machine maken. dit is de beschrijving"},
{ id: 6, name: "Zinc verstopt Machine C", checked: false, roleId: 3 , beschrijving: "Ga de machine maken. dit is de beschrijving"},
{ id: 7, name: "Zinc verstopt Machine D", checked: false, roleId: 4 , beschrijving: "Ga de machine maken. dit is de beschrijving"},
{ id: 8, name: "Zinc verstopt Machine E", checked: false, roleId: 5 , beschrijving: "Ga de machine maken. dit is de beschrijving"},
{ id: 9, name: "Storing Machine E", checked: false, roleId: 6 , beschrijving: "Ga de machine maken. dit is de beschrijving"}
);
setChecked(id: number) {
var melding = this.getMelding(id);
console.log(!melding.checked);
this.checkedChange.next(!melding.checked);
}
}
Component
import { ActivatedRoute } from "@angular/router";
import {Melding} from "../melding/melding";
import {MeldingService} from "../melding/melding.service";
@Component({
selector: 'ns-melding-detail',
templateUrl: './melding-detail.component.html'
})
export class MeldingDetailComponent implements OnInit {
melding: Melding;
constructor(
private meldingService: MeldingService,
private route: ActivatedRoute) { }
ngOnInit(): void {
const id = +this.route.snapshot.params.id;
this.melding = this.meldingService.getMelding(id);
}
onButtonClick(id: number) {
this.meldingService.setChecked(id);
}
}