psanetra / bind-observable Goto Github PK
View Code? Open in Web Editor NEWProvides a typescript decorator which binds class properties to observable companion properties.
License: MIT License
Provides a typescript decorator which binds class properties to observable companion properties.
License: MIT License
Current usage with optional properties (may be a good idea to document this tip)
@BindObservable()
// We must explicitly set it to undefined or BindObservable won't recognize the initial value
public optionalProperty?: string = undefined;
private optionalProperty$!: Observable<string | undefined>;
Possible improvement
@BindObservable()
// BindObservable recognize the optional property and automaticall emits 'undefined' as initial value
public optionalProperty?: string;
private optionalProperty$!: Observable<string | undefined>;
What do you think?
I'm wondering if there could be a way to make @BindObservable()
work with properties inherited from a parent Component.
Example:
@Component({
selector: 'some-component',
templateUrl: './some-component.html',
styleUrls: ['./some-component.scss']
})
export class SomeComponent {
@Input() property!: string;
}
@Component({
selector: 'some-child-component',
templateUrl: './some-child-component.html',
styleUrls: ['./some-child-component.scss']
})
export class SomeChildComponent extends SomeComponent {
// How to put @BindObservable on 'property' without re-defining it?
}
Could it be a supported use case?
Problem is the decorator won't be able to attach itself to a property, but this can be changed allowing @BindObservable
to accept also a class, instead of a property, and behave differently depending on where it is attached.
Example for API extension
@Component({
selector: 'some-component',
templateUrl: './some-component.html',
styleUrls: ['./some-component.scss']
})
export class SomeComponent {
@Input() property!: string;
@Input() property2!: string;
}
@BindObservable([ 'property', [ 'property2', 'property2Observable' ] ])
@Component({
selector: 'some-child-component',
templateUrl: './some-child-component.html',
styleUrls: ['./some-child-component.scss']
})
export class SomeChildComponent extends SomeComponent {}
When a plain string or a single element array is found ([ 'property' ]
or [ [ 'property' ] ]
) the observable is created as the property name plus $.
When a 2-elements array is provided ([ [ 'property2', 'property2Observable' ] ]
), the first one is the name of the original property to use, the second is the name of the observable property.
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can resolve this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
An npm token must be created and set in the NPM_TOKEN
environment variable on your CI environment.
Please make sure to create an npm token and to set it in the NPM_TOKEN
environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/
.
Good luck with your project β¨
Your semantic-release bot π¦π
Giving the fact that the original property is deleted to create the new one using an accessor descriptor upon the ReplaySubject, I guess that this decorator cannot be applied to a property which is already defined as a get/set couple, right?
If not, and there is not solution against it, I'd probably specify it in the README
Hi! Thanks for sharing this.
I have created a StackBlitz of this but the bound value in the html does not update (see header).
Can you help and correct this? Or do I misunderstand the purpose of this code...?
https://stackblitz.com/edit/angular-bind-observable
Many thanks,
Mike
Sometimes it can be useful to skip the emission of the default value.
Not really sure about how it can be the API for this, maybe another decorator parameter or transforming the current decorator parameter to an option-bag?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.