titanium-dependency-injection - Vaadin Add-on Directory
Dependency injection for Polymer
**[ This description is mirrored from README.md at [github.com/LssPolymerElements/titanium-dependency-injection](https://github.com//LssPolymerElements/titanium-dependency-injection/blob/updates_demo_values/README.md) on 2019-05-10 ]**
# titanium-dependency-injection
To install use: `bower install --save titanium-dependency-injection`
[ LIVE DEMO AND API ](https://www.webcomponents.org/element/LssPolymerElements/titanium-dependency-injection)
[](https://www.webcomponents.org/element/LssPolymerElements/titanium-dependency-injection)
## Scenario:
```
---app-main <-- RESOLVER. anything provided below this (user-manager in this case) is resolved from this component
--my-parent-component <-- PROVIDER of user-manager. user-manager lives in this component.
-user-manager
-component-a
-component-b
-component-c
-component-d
-component-e
-my-child-component <-- needs access to user-manager becomes REQUESTER of user-manager
-user-manager
-component-f
--my-faq
--my-feedback
```
## How to use:
In this example we have a single instance component that is called user-manager that we would like to use in a child component nested deep in our app. Rather then binding the user-manager through the component tree in our app, we can simply provide, store, and then request the user-manager as seen below.
### 1. Declare a parent component as the dependency resolver, which will store the references to provided objects (user-manager)
```typescript
class MyParentComponent extends TitanumDependencyResolverMixin(Polymer.Element) {
}
```
### 2. Provide your component in any child component
```typescript
class FirstChildComponent extends TitanumProviderMixin(Polymer.Element) {
ready() {
super.ready();
this.provideInstance("UserManager", this.$.userManager);
}
}
```
### 3. Request your component from any child component
```typescript
class DemoRequester extends TitaniumRequesterMixin(Polymer.Element) {
async connectedCallback() {
super.connectedCallback();
var userManager = await this.requestInstance('UserManager');
userManager.ensureLoggedIn();
}
}
```
### Be both a requester and provider
```typescript
class MyComponent extends Polymer.mixinBehaviors([TitanumProviderMixin,TitaniumRequesterMixin],Polymer.Element) {
ready() {
super.ready();
this.provideInstance("MyComponent", this);
}
async connectedCallback() {
super.connectedCallback();
let userManager = await this.requestInstance("UserManager");
userManager.ensureLoggedIn();
}
async onLogoutButtonClick(){
let userManager = this.requestInstance("UserManager");
userManager.logout();
}
}
```