I have a parent component (CategoryComponent), a child component (videoListComponent) and an ApiService.
I have most of this working fine i.e. each component can access the json api and get its relevant data via observables.
Currently video list component just gets all videos, I would like to filter this to just videos in a particular category, I achieved this by passing the categoryId to the child via @Input()
.
CategoryComponent.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
This works and when the parent CategoryComponent category changes then the categoryId value gets passed through via @Input()
but I then need to detect this in VideoListComponent and re-request the videos array via APIService (with the new categoryId).
In AngularJS I would have done a $watch
on the variable. What is the best way to handle this?
This question is related to
angular
angular2-changedetection
I just want to add that there is another Lifecycle hook called DoCheck
that is useful if the @Input
value is not a primitive value.
I have an Array as an Input
so this does not fire the OnChanges
event when the content changes (because the checking that Angular does is 'simple' and not deep so the Array is still an Array, even though the content on the Array has changed).
I then implement some custom checking code to decide if I want to update my view with the changed Array.
I was getting errors in the console as well as the compiler and IDE when using the SimpleChanges
type in the function signature. To prevent the errors, use the any
keyword in the signature instead.
ngOnChanges(changes: any) {
console.log(changes.myInput.currentValue);
}
EDIT:
As Jon pointed out below, you can use the SimpleChanges
signature when using bracket notation rather than dot notation.
ngOnChanges(changes: SimpleChanges) {
console.log(changes['myInput'].currentValue);
}
Basically both suggested solutions work fine in most cases. My main negative experience with ngOnChange() is the lack of type safety.
In one of my projects I did some renaming, following which some of the magic strings remained unchanged, and the bug of course took some time to surface.
Setters do not have that issue: your IDE or compiler will let you know of any mismatch.
Use the ngOnChanges()
lifecycle method in your component.
ngOnChanges is called right after the data-bound properties have been checked and before view and content children are checked if at least one of them has changed.
Here are the Docs.
This solution uses a proxy class and offers the following advantages:
ngOnChanges()
Example usage:
@Input()
public num: number;
numChanges$ = observeProperty(this as MyComponent, 'num');
Utility function:
export function observeProperty<T, K extends keyof T>(target: T, key: K) {
const subject = new BehaviorSubject<T[K]>(target[key]);
Object.defineProperty(target, key, {
get(): T[K] { return subject.getValue(); },
set(newValue: T[K]): void {
if (newValue !== subject.getValue()) {
subject.next(newValue);
}
}
});
return subject;
}
Here ngOnChanges will trigger always when your input property changes:
ngOnChanges(changes: SimpleChanges): void {
console.log(changes.categoryId.currentValue)
}
You can use a BehaviorSubject
within a facade service then subscribe to that subject in any component and when an event happens to trigger a change in data call .next()
on it. Make sure to close out those subscriptions within the on destroy lifecycle hook.
data-api.facade.ts
@Injectable({
providedIn: 'root'
})
export class DataApiFacade {
currentTabIndex: BehaviorSubject<number> = new BehaviorSubject(0);
}
some.component.ts
constructor(private dataApiFacade: DataApiFacade){}
ngOnInit(): void {
this.dataApiFacade.currentTabIndex
.pipe(takeUntil(this.destroy$))
.subscribe(value => {
if (value) {
this.currentTabIndex = value;
}
});
}
setTabView(event: MatTabChangeEvent) {
this.dataApiFacade.currentTabIndex.next(event.index);
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.complete();
}
You could also just pass an EventEmitter as Input. Not quite sure if this is best practice tho...
CategoryComponent.ts:
categoryIdEvent: EventEmitter<string> = new EventEmitter<>();
- OTHER CODE -
setCategoryId(id) {
this.category.id = id;
this.categoryIdEvent.emit(this.category.id);
}
CategoryComponent.html:
<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>
And in VideoListComponent.ts:
@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
this.categoryIdEvent.subscribe(newID => {
this.categoryId = newID;
}
}
You can also , have an observable which triggers on changes in the parent component(CategoryComponent)
and do what you want to do in the subscribtion in the child component. (videoListComponent
)
service.ts
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);
CategoryComponent.ts
public onCategoryChange(): void {
service.categoryChange$.next();
}
videoListComponent.ts
public ngOnInit(): void {
service.categoryChange$.subscribe(() => {
// do your logic
});
}
The safest bet is to go with a shared service instead of a @Input
parameter.
Also, @Input
parameter does not detect changes in complex nested object type.
A simple example service is as follows:
Service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SyncService {
private thread_id = new Subject<number>();
thread_id$ = this.thread_id.asObservable();
set_thread_id(thread_id: number) {
this.thread_id.next(thread_id);
}
}
Component.ts
export class ConsumerComponent implements OnInit {
constructor(
public sync: SyncService
) {
this.sync.thread_id$.subscribe(thread_id => {
**Process Value Updates Here**
}
}
selectChat(thread_id: number) { <--- How to update values
this.sync.set_thread_id(thread_id);
}
}
You can use a similar implementation in other components and all your compoments will share the same shared values.
If you don't want use ngOnChange
implement og onChange()
method, you can also subscribe to changes of a specific item by valueChanges
event, ETC.
myForm = new FormGroup({
first: new FormControl(),
});
this.myForm.valueChanges.subscribe((formValue) => {
this.changeDetector.markForCheck();
});
the markForCheck()
writen because of using in this declare:
changeDetection: ChangeDetectionStrategy.OnPush
@Input() set categoryId(categoryId: number) {
console.log(categoryId)
}
please try using this method. Hope this helps
Source: Stackoverflow.com