Observable of Component Attribute Changes in Angular2 - javascript

When creating a component in angular 2 that has inputs attributes via #Input, how can I get an observable from the changes made to that attribute #Input (not to be confused with user form input).
export class ExampleComponent implement OnChanges{
#Input() userObject: User;
ngOnChanges(changes: any): void{
// Validate that its the 'userObject' property first
this.doStuff()
}
}
In practice, I would like to merge the Observable changes of the userObject with the Observable changes of other things to have a fluent change reaction pattern.
export class ExampleComponent implement OnChanges{
#Input() userObject: User;
constructor():{
userObject.valueChanges.subscribe(x=>{ this.doStuff() });
}
}

I found out the that BehaviorSubject class enables this scenario the best. Instead of creating a separate backend field, you can use the BehaviorSubject's getValue function to peak at the current value. Then use the backing BehaviorSubject to view as an observable for changes.
export class ExampleComponent{
private _userObject: BehaviorSubject<User> = new BehaviorSubject<User>(null);
#Input()
set userObject(value: User): { this._userObject.next(value); }
get userObject(): User { return this._userObject.getValue(); }
}

Try usings a get and a set, valueChanges() below will fire on being set.
private _userObject: User;
#Input()
set userObject(userObject: User) {
this._userObject = userObject;
this.valueChanges();
}
get userObject(): User {
return this._userObject;
}
With an Observable:
private userObjectChange = new Subject<User>();
userObjectChange$ = this.userObjectChange.asObservable();
private _userObject: User;
#Input()
set userObject(userObject: User) {
this.userObjectChange.next(userObject);
this._userObject = userObject;
}
get userObject(): User {
return this._userObject;
}
To subscribe:
this.newQuote.subscribe(user => {...})

You can use subject for this:
export class ExampleComponent {
#Input() set userObject(userObject: User) {
this.userObject$.next(userObject);
}
private userObject$ = new Subject<User>();
constructor():{
this.userObject$.subscribe(x=>{ this.doStuff() });
}
}

The best way to check the change of an input is actually by using the ngOnChanges life cycle.
ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
const changedInputs = Object.keys(changes);
// Only update the userObject if the inputs changed, to avoid unnecessary DOM operations.
if (changedInputs.indexOf('userObject') != -1) {
// do something
}
}
Reference: https://github.com/angular/material2/blob/master/src/lib/icon/icon.ts#L143

Related

What makes a component fail to update its template when a Boolean value changes, in the Angular app?

In an Angular 11 app, I have a simle service that mekes a get request and reads a JSON.
The service:
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Promo } from '../models/promo';
#Injectable({
providedIn: 'root'
})
export class PromoService {
public apiURL: string;
constructor(private http: HttpClient) {
this.apiURL = `https://api.url.com/`;
}
public getPromoData(){
return this.http.get<Promo>(`${this.apiURL}/promo`);
}
}
In the the component, I need to compare the array of products with the array of campaign products (included in the JSON mantioned above) and higlight the promoted products:
export class ProductCardComponent extends DestroyableComponent implements OnInit, OnChanges
{
public promoData: any;
public promoProducts: any;
public isPromoProduct: boolean = false;
public ngOnInit() {
this.getCampaignData();
}
public ngOnChanges(changes: SimpleChanges): void {
this.getCampaignData();
}
public getPromoData() {
this.promoService.getPromoData().pipe(takeUntil(this.destroyed$)).subscribe(data => {
this.promoData = data;
this.promoProducts = this.promoData.products;
let promoProduct = this.promoProducts.find((product:any) => {
return this.product.unique_identifier == product.unique_identifier;
});
if (promoProduct) {
// Update boolean
this.isPromoProduct = true;
}
});
}
}
In the component's html file (template), I have:
<span *ngIf="isPromoProduct" class="promo">Promo</span>
There are no compilation errors.
The problem
For a reason I have been unable to understand, the template does not react to the change of the variable isPromoProduct and the template is not updated, despite the fact that I call the function inside ngOnInit and ngOnChanges.
Questions:
Where is my mistake?
What is a reliable way to update the template?
subscribing to Observable inside .ts file it's mostly not a best practice.
try to avoid it by using async pipe of Angular.
you need to store the observable in the variable and not the data returned from the observable, for example:
// this variable holds the `observable` itself.
this.promoData$ = this.promoService.getPromoData()
and then in the template you can do it like this:
<div *ngIf="promoData$ | async as promoData">
here you can access the promoData
</div>
you can still use pipe() to map the data etc but avoid the subscribe()
The isPromoProduct boolean is not an input. The ngOnChanges gets triggered for changes on your properties that are decorated with the #Input decorator. For your particular case, you can inject the ChangeDetectorRef and trigger change detection manually:
constructor(private cdr: ChangeDetectorRef) {}
// ...
public getPromoData() {
this.promoService.getPromoData().subscribe(data => {
// ...
if (promoProduct) {
// Update boolean
this.isPromoProduct = true;
this.cdr.detectChanges();
}
});
}
You also don't need to manage httpClient subscriptions. The observables generated by a simple get or post request will complete after they emit the response of the request. You only need to explicitly manage the unsubscribe for hot observables (that you create from subjects that you instantiate yourself).

Angular call parent component function from child component, update variable in real time from sessionStorage

The code starts with an initial value in product variable, which is setted into sessionStorage. When i trigger the side-panel (child component), this receive the product.name from params in url, then this component searchs in sessionStorage and updates the product.amount value (and set it to sessionStorage).
The parent component function that i'm trying to invoke from the child component is getProductStatus(); When i update the product.amount value in the side-panel i need to update also the product object in parent component at the same time. This is what i've been trying, Thanks in advance.
Code:
https://stackblitz.com/edit/angular-ivy-npo4z7?file=src%2Fapp%2Fapp.component.html
export class AppComponent {
product: any;
productReturned: any;
constructor() {
this.product = {
name: 'foo',
amount: 1
};
}
ngOnInit() {
this.getProductStatus();
}
getProductStatus(): void {
this.productReturned = this.getStorage();
if (this.productReturned) {
this.product = JSON.parse(this.productReturned);
} else {
this.setStorage();
}
}
setStorage(): void {
sessionStorage.setItem(this.product.name, JSON.stringify(this.product));
}
getStorage() {
return sessionStorage.getItem(this.product.name);
}
reset() {
sessionStorage.clear();
window.location.reload();
}
}
You have two options for data sharing in this case. If you only need the data in your parent component:
In child.component.ts:
#Output() someEvent = new EventEmitter
someFunction(): void {
this.someEvent.emit('Some data...')
}
In parent template:
<app-child (someEvent)="handleSomeEvent($event)"></app-child>
In parent.component.ts:
handleSomeEvent(event: any): void {
// Do something (with the event data) or call any functions in the component
}
If you might need the data in another component aswell, you could make a service bound to the root of the application with a Subject to subscibe to in any unrelated component wherever in your application.
Service:
#Injectable()
export class DataService {
private _data = new BehaviorSubject<SnapshotSelection>(new Data());
private dataStore: { data: any }
get data() {
return this.dataStore.asObservable();
}
updatedDataSelection(data: Data){
this.dataStore.data.push(data);
}
}
Just pass the service in both constructors of receiving and outgoing component.
In ngOnInit() on receiving side:
subscription!: Subscription
...
dataService.data.subscribe(data => {
// Do something when data changes
})
...
ngOnDestroy() {
this.subscription.unsubscribe()
}
Then just use updatedDataSelection() where the changes originate.
I documented on all types of data sharing between components here:
https://github.com/H3AR7B3A7/EarlyAngularProjects/tree/master/dataSharing
For an example on the data service:
https://github.com/H3AR7B3A7/EarlyAngularProjects/tree/master/dataService

Rxjs : prevent pushing data to subjects from outisde the service

Within my anguular app , i ve this service :
#Injectable()
export class myService{
myBehaviouSubject= new BehaviorSubject("");
setData(){
this.myBehaviouSubject.next("123");
}
}
Inside my app.component , i m able to get the value , but i want to keep it readonly or editable only inside the service itself , i want to prevent to push any data from component (.next('DATA'))
#Component({
})
export class AppComponent implements OnInit {
constructor(public myService : MyService) { }
getData(){
// GET VALUE
this.myService.myBehaviouSubject.value
}
unwantedMethodToSetValue(){
// SET VALUE -> i want to prevent this
this.myService.myBehaviouSubject.next("unwanted value")
}
}
Suggestions ?
You can keep the observable inside service only by declaring it as private field of a class.
#Injectable()
export class myService {
private myBehaviouSubject = new BehaviorSubject("");
// Use this observable inside the app component class.
myBehaviouSubjectObservable = myBehaviouSubject.asObservable();
setData() {
this.myBehaviouSubject.next("123");
}
}
#Component({
})
export class AppComponent implements OnInit {
constructor(public myService: MyService) {}
getData() {
// You can subscribe to observable and can get value here
this.myService.myBehaviouSubjectObservable.subscribe((value) => {
console.log(value);
})
}
unwantedMethodToSetValue() {
// SET VALUE -> you cannot do this here now.
this.myService.myBehaviouSubject.next("unwanted value")
}
}
Use property access modifiers:
#Injectable()
export class MyService{
private myValueSubject: BehaviorSubject<string> = new BehaviorSubject<string>("");
public readonly myValueObservable: Observable<string> = this.myValueSubject.asObservable();
public setData() {
this.myValueSubject.next("123");
}
public getData(): string {
return this.myValueSubject.value;
}
}
Instances of MyService will not have a publicly accessible subject.
I usually try to avoid a method like getData, favoring subscriptions to the related observable. If I ever find myself writing those kinds of methods, it's a warning flag to re-evaluate my architecture. If you just want to store a value and get/set it with methods, use a plain old private property. The entire purpose of the subject is defeated if you are only ever getting the value through a method like getData()
Check out the documentation for typescript classes, which discusses access modifiers: https://www.typescriptlang.org/docs/handbook/classes.html
The traditional answer : If you return the Subject as an observable, you disallow .next() calls.
But in your case, you also want direct access to the current value without subscribing, so you could add a getter for that too.
#Injectable()
export class myService{
private readonly myBehaviouSubject = new BehaviorSubject("");
setData(){
this.myBehaviouSubject.next("123");
}
public get myObservable$(): Observable<string>{
return this.myBehaviourSubject;
}
public get currentValue(): string{
return this.myBehaviourSubject.value;
}
}
https://stackblitz.com/edit/angular-protected-rxjs-subject
in this solution which I hope meet you needs:
be aware that there is no subscription
fetching updates handled manually
Property 'myBehaviourSubject' is private and only accessible
within class 'TestService'.

Shared service and Observable, BehaviourSubject in Angular2

I have a shared service SharedService
#Injectable()
export class SharedService {
private title = new BehaviorSubject<string>("");
currentMessage = this.title.asObservable();
constructor() { }
setData(val: string) {
this.title.next(val);
}
}
I have a component, where I get new data
export class Fill implements OnInit {
public title;
constructor(public shared: SharedService) {
}
ngOnInit() {
this.shared.setData(this.title);
}}
And the component Info, where I want read new data
export class InfoComponent implements OnInit {
constructor(public shared: SharedService) {
this.title = ''; }
ngOnInit() {
console.log('i am title from info ')
this.shared.currentMessage.subscribe(title => this.title = title)
console.log(this.shared.currentMessage);
console.log(this.title);
}}
In both cases of console.log I get Objects, that contains information, that I need - but I can't retrieve value of it. So, on my console it look like
But if try something like
console.log(this.shared.currentMessage.source.source.value);
it says Property 'source' is protected and only accessible within class 'Observable' and its subclasses.
this.shared.currentMessage.value
this.title.value
doesn't work also...
How could I retrieve data (value) of one or another?
Yes. #wostex mentioned it correctly. Keep ngOninit out side of the constructor function and,
this.shared.currentMessage.subscribe(title => {
this.title = title;
console.log(this.title)
})
Update
I suspect currentMessage = this.title.asObservable(); is invalid line inside your SharedService Injectable.
You could write a method to expose this.title expose by currentMessage method like below
#Injectable()
export class SharedService {
private title = new BehaviorSubject<string>("");
//below line was wrong.
//currentMessage = this.title.asObservable();
currentMessage(){
return this.title.asObservable();
}
constructor() { }
setData(val: string) {
this.title.next(val);
}
}
//Usage
console.log(this.shared.currentMessage().getValue());
Yes, you should first take out ngOnInit from constructor function. I supposed you want to retrieve initial state of your BehaviourSubject, so then you could use .getValue() function on that Observable without subscribing to stream.
console.log(this.shared.currentMessage.getValue());
ngOnInit has to be Outside the constructor.
And as pointed by #micronkys
As you are subscribing to a observable the value of this.title is not available in the next line as the subscribing is async and so the title dosent get updated . when you log it.
try and use *ngIf = "title" in the template like this
<div *ngIf = "title">
{{title}}
</div>
UPDATE
this.shared.currentMessage.subscribe((title) => {
this.title = title;
console.log(this.title)
}
Please find a plunker for the problem hope you get the answer now

Handle #Input and #Output for dynamically created Component in Angular 2

How to handle/provide #Input and #Output properties for dynamically created Components in Angular 2?
The idea is to dynamically create (in this case) the SubComponent when the createSub method is called. Forks fine, but how do I provide data for the #Input properties in the SubComponent. Also, how to handle/subscribe to the #Output events the SubComponent provides?
Example:
(Both components are in the same NgModule)
AppComponent
#Component({
selector: 'app-root'
})
export class AppComponent {
someData: 'asdfasf'
constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }
createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
ref.changeDetectorRef.detectChanges();
return ref;
}
onClick() {
// do something
}
}
SubComponent
#Component({
selector: 'app-sub'
})
export class SubComponent {
#Input('data') someData: string;
#Output('onClick') onClick = new EventEmitter();
}
You can easily bind it when you create the component:
createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
ref.someData = { data: '123' }; // send data to input
ref.onClick.subscribe( // subscribe to event emitter
(event: any) => {
console.log('click');
}
)
ref.changeDetectorRef.detectChanges();
return ref;
}
Sending data is really straigthforward, just do ref.someData = data where data is the data you wish to send.
Getting data from output is also very easy, since it's an EventEmitter you can simply subscribe to it and the clojure you pass in will execute whenever you emit() a value from the component.
I found the following code to generate components on the fly from a string (angular2 generate component from just a string) and created a compileBoundHtml directive from it that passes along input data (doesn't handle outputs but I think the same strategy would apply so you could modify this):
#Directive({selector: '[compileBoundHtml]', exportAs: 'compileBoundHtmlDirective'})
export class CompileBoundHtmlDirective {
// input must be same as selector so it can be named as property on the DOM element it's on
#Input() compileBoundHtml: string;
#Input() inputs?: {[x: string]: any};
// keep reference to temp component (created below) so it can be garbage collected
protected cmpRef: ComponentRef<any>;
constructor( private vc: ViewContainerRef,
private compiler: Compiler,
private injector: Injector,
private m: NgModuleRef<any>) {
this.cmpRef = undefined;
}
/**
* Compile new temporary component using input string as template,
* and then insert adjacently into directive's viewContainerRef
*/
ngOnChanges() {
class TmpClass {
[x: string]: any;
}
// create component and module temps
const tmpCmp = Component({template: this.compileBoundHtml})(TmpClass);
// note: switch to using annotations here so coverage sees this function
#NgModule({imports: [/*your modules that have directives/components on them need to be passed here, potential for circular references unfortunately*/], declarations: [tmpCmp]})
class TmpModule {};
this.compiler.compileModuleAndAllComponentsAsync(TmpModule)
.then((factories) => {
// create and insert component (from the only compiled component factory) into the container view
const f = factories.componentFactories[0];
this.cmpRef = f.create(this.injector, [], null, this.m);
Object.assign(this.cmpRef.instance, this.inputs);
this.vc.insert(this.cmpRef.hostView);
});
}
/**
* Destroy temporary component when directive is destroyed
*/
ngOnDestroy() {
if (this.cmpRef) {
this.cmpRef.destroy();
}
}
}
The important modification is in the addition of:
Object.assign(this.cmpRef.instance, this.inputs);
Basically, it copies the values you want to be on the new component into the tmp component class so that they can be used in the generated components.
It would be used like:
<div [compileBoundHtml]="someContentThatHasComponentHtmlInIt" [inputs]="{anInput: anInputValue}"></div>
Hopefully this saves someone the massive amount of Googling I had to do.
createSub() {
const factory = this.resolver.resolveComponentFactory(SubComponent);
const ref = this.location.createComponent(factory, this.location.length,
ref.instance.model = {Which you like to send}
ref.instance.outPut = (data) =>{ //will get called from from SubComponent}
this.location.parentInjector, []);
ref.changeDetectorRef.detectChanges();
return ref;
}
SubComponent{
public model;
public outPut = <any>{};
constructor(){ console.log("Your input will be seen here",this.model) }
sendDataOnClick(){
this.outPut(inputData)
}
}
If you know the type of the component you want to add i think you can use another approach.
In your app root component html:
<div *ngIf="functionHasCalled">
<app-sub [data]="dataInput" (onClick)="onSubComponentClick()"></app-sub>
</div>
In your app root component typescript:
private functionHasCalled:boolean = false;
private dataInput:string;
onClick(){
//And you can initialize the input property also if you need
this.dataInput = 'asfsdfasdf';
this.functionHasCalled = true;
}
onSubComponentClick(){
}
Providing data for #Input is very easy. You have named your component app-sub and it has a #Input property named data. Providing this data can be done by doing this:
<app-sub [data]="whateverdatayouwant"></app-sub>

Categories