# Selectors || 2 ## Basic Selector
```js import { LitElement, html } from "lit-element"; import { LitAtom, atom, selector } from "@klaxon/atom"; const [count, setCount] = atom({ key: 'count', default: 0 }); const countPlusOne = selector({ key: 'countPlusOne', get: ({getAtom}) => { const originalCount = getAtom(count); return originalCount + 1; } }); export class MyCounter extends LitAtom(LitElement) { static atoms = [count]; static selectors = [countPlusOne]; render() { return html`
-
count: ${this.count}
countPlusOne: ${this.countPlusOne}
+
`; } } customElements.define("my-counter", MyCounter); ```
## Nested Selectors
```js import { LitElement, html } from "lit-element"; import { LitAtom, atom, selector } from "@klaxon/atom"; const [count, setCount] = atom({ key: 'count', default: 0 }); const countPlusOne = selector({ key: 'countPlusOne', get: ({getAtom}) => { const originalCount = getAtom(count); return originalCount + 1; } }); const countPlusTen = selector({ key: 'countPlusTen', get: async ({getSelector}) => { const previousSelector = await getSelector(countPlusOne); return previousSelector + 10; } }); export class MyCounter extends LitAtom(LitElement) { static atoms = [count]; static atoms = [countPlusOne, countPlusTen]; render() { return html`
-
count: ${this.count}
countPlusOne: ${this.countPlusOne}
countPlusTen: ${this.countPlusTen}
+
`; } } customElements.define("my-counter", MyCounter); ```
## Data fetching Selector
```js import { LitElement, html, css } from 'lit-element'; import { atom, selector, LitAtom } from '@klaxon/atom'; const [selected, setSelected] = atom({ key: 'selected', default: null }); const selectedPokemon = selector({ key: 'selectedPokemon', get: async ({getAtom}) => { const id = getAtom(selected); if(id === null) return null; return await (await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)).json(); } }); class MyApp extends LitAtom(LitElement) { static selectors = [selectedPokemon]; static get properties() { return { pokemon: { type: Array } } } async connectedCallback() { super.connectedCallback(); this.pokemon = (await (await fetch('https://pokeapi.co/api/v2/pokemon')).json()).results; } static styles = css` :host { display: flex; flex-direction: row; } .pokemon { list-style: none; } ` render() { return html`
Pokemon:
${this.pokemon?.map((pokemon, idx) => html`
${pokemon.name}
setSelected(idx+1)}>show info
`)}
Pokemon info:
${this.selectedPokemon ? html`
name: ${this.selectedPokemon?.name}
height: ${this.selectedPokemon?.height}
weight: ${this.selectedPokemon?.weight}
` : '' }
`; } } customElements.define('my-app', MyApp); ```
## Data fetching Selector with loadable Atom
```js import { LitElement, html } from 'lit-element'; import { atom, selector, LitAtom } from '@klaxon/atom'; const [query, setQuery] = atom({ key: 'query', loadable: async (id = 1) => { const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${id}`); const body = await res.json(); return body; } }); const renderStatus = selector({ key: 'renderStatus', get: ({getAtom}) => { const { status, result } = getAtom(query); switch(status) { case 'success': return html`Success! ${result.name}` case 'error': return html`error! :(` case 'pending': case 'initialized': return html`Loading...` } } }); class MyApp extends LitAtom(LitElement) { static selectors = [renderStatus]; connectedCallback() { super.connectedCallback(); setQuery(); } render() { return this.renderStatus; } } customElements.define('my-app', MyApp); ```