I have a list of items that is set in the service and is called in the ngOnInit():
async ngOnInit(){
this.items = await this.service.getItems();
}
and this list is rendered using the directive *ngfor.
However, now I need to refresh the items list when there is any change in a variable. So I need an event that runs only when a certain variable (lets called it itemCategories) changes its value lets.
How can I achieve this?
Angular version is 12 and I am new to this
fill your data in behaviourSubject then subscribe to it, now your behaviourSubject method will be called whenever you data get changed, here is an example:
I declare my behaviourSubject like these:
private _resetForm$ = new BehaviorSubject<boolean>(false);
public set setResetForm(resetStatus: boolean) {
this._resetForm$.next(resetStatus);
}
public get resetForm(): Observable<boolean> {
return this._resetForm$.asObservable();
}
then I change it here:
this.setResetForm = true;
now i will get event from here because setResetForm have changed so i will get my event from it:
ngOnInit(): void {
this.resetForm.subscribe((res: boolean) => {
if (res) {
console.log(res);
}
});
}
good luck!
You can use the EventEmitter and @Output() to achieve your goal.
Dropdown menu component:
import { Component, Output, EventEmitter, NgModule } from '@angular/core';
@Component({
selector: 'app-dropdown',
template: `
<div>
<select [(ngModel)]="selected" (ngModelChange)="onChange($event)">
<option *ngFor="let category of categories" [value]="category">{{category}}</option>
</select>
</div>`
})
export class DropdownComponent {
@Output() selectedCategory: EventEmitter<string> = new EventEmitter<string>();
categories = ["All categories", "A", "B", "C"]; //your categories list
selected: string = "All categories"; //default value
constructor() {
}
onChange(newvalue): void {
this.selectedCategory.emit(newvalue);
}
}
Here is the other component that will receive the selected value whenever it changes from the dropdown component
import {Component, NgModule} from '@angular/core'
@Component({
selector: 'app-main',
template: `
<div>
<app-dropdown (selectedCategory)='onChange($event)'></app-dropdown>
</div>
`,
})
export class MainComponent {
selected: string;
constructor() {
}
onChange(category):void {
this.selected = category;
//get your items list based on the selected category
}
}
Based on your short explanation here is a general solution:
wrap your items assignment in a method and call this method when you set the itemCategories value.
async ngOnInit(){
this.setItems();
}
setItems(){
this.items = await this.service.getItems();
}
setItemCategories(value){
this.itemCategories = value;
this.setItems();
}