ssougnez

<ngs-container [query$]="query$"
               [data$]="pokemons$">
    <ng-template let-pokemons>
        <div *ngFor="let p of pokemons; trackBy: trackByValue">{{ p.name }}</div>
    </ng-template>
</ngs-container>

ssougnez

import { NgFor } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, TrackByFunction } from '@angular/core';
import { NgStore, NgStoreModule, trackByValue } from '@ssougnez/ng-store';
import { map, Observable } from 'rxjs';
import { Pokemon } from './models/pokemon.model';
import { PokemonService } from './services/pokemon.service';
import { AppState } from './state/app.state';

@Component({
  selector: 'app-root',

ssougnez

import { inject, Injectable } from "@angular/core";
import { NgStore } from "@ssougnez/ng-store";
import { Observable } from "rxjs";
import { Pokemon } from "../models/pokemon.model";
import { AppState } from "../state/app.state";

@Injectable({
    providedIn: 'root'
})
export class PokemonService {

ssougnez

import { createEntities, Entities } from "@ssougnez/ng-store";
import { Pokemon } from "../models/pokemon.model";

export type AppState = {
    pokemons: Entities<Pokemon>;
}

export const initial: AppState = {
    pokemons: createEntities<Pokemon>([], ['type'])
}

ssougnez

import { BaseEntity } from "@ssougnez/ng-store";

export type Pokemon = BaseEntity<number> & {
    name: string;
    type: 'water' | 'fire' | 'electric' | 'grass' | 'bug' | 'normal' | 'poison';
}

ssougnez

if (element.tagName === 'A') {
  const href: string = element.href?.toLowerCase();

  if (href?.startsWith(location.origin.toLowerCase())) {
    element.addEventListener('click', (e: MouseEvent) => {
      this._router.navigate([href.substring(location.origin.length)]);
      e.preventDefault();
    });
  }
}

ssougnez

import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[html]',
})
export class HtmlDirective implements OnChanges {
  private _uniqueId: string;

  @Input()

ssougnez

const descandants = this._elementRef.nativeElement.querySelectorAll('*');

for (const element of descandants) {
  element.setAttribute(this._uniqueId, '');

  ...
}

ssougnez

this._elementRef.nativeElement.innerHTML = this.html;

ssougnez

this._uniqueId ||= [...this._elementRef.nativeElement.attributes].find(
  (attr) => attr.name.startsWith('_ngcontent-')
).name;