Хотел написать ngAfterViewInit подумал и написал AfterViewChecked гг

посоветуйте пожалуйста ангуляр либу для написания админки

посмотрите здесь есть готовый пример
Tree with checkboxes
https://material.angular.io/components/tree/examples

Спасибо!

ngx-bootstrap / material angular

А насколько кошерно засовывать Observable<Event> в Output

такое  ?
@Output() change = new EventEmitter<Observable<Event>>();

Зачем так сложно? EventEmitter же сам в основе Observable?

хочу прям наружу кинуть значения из потока

  this.virtualScroll
      .elementScrolled()
      .pipe(debounceTime(400))
      .subscribe(e => {
        const scrollPosition = this.virtualScroll.getOffsetToRenderedContentStart();

        console.log(scrollPosition, e);
      });

отсюда сразу в Output что бы подписки не делать

@Output() readonly scrollPosition: Observable<number> = ... и то поток который выше

Именно

  this.virtualScroll
      .elementScrolled()
      .pipe(debounceTime(400))
      .subscribe(e => {
        const scrollPosition = this.virtualScroll.getOffsetToRenderedContentStart();

        console.log(scrollPosition, e);
      });

может так сработает (не пробовал)

@Output() change = new Subject();

ngAfterViewInit() {
    this.change = this.virtualScroll
        .elementScrolled()
        .pipe(debounceTime(400))
    );
}

@Output() change = new Subject();

ngAfterViewInit() {
    this.change = this.virtualScroll
        .elementScrolled()
        .pipe(debounceTime(400))
    );
}

Я хотел сделать все тоже самое только на Observable , просто на сколько это нормальный кейс

подскажите по фильтрации данных.
есть main компонент, в котором есть условная data.
в этом main компонете есть дочерние компоненты фильтров filterX, filterY... filterZ
вот я передал в filterX data, он мне отдал обратно уже отфильрованную data. а как мне контролировать текущее состояние этой data, что бы откатиться к неотфильтрованной. и как контролировать что нужно откатиться к отфильтрованной только по filterY (к примеру)...

не уверен что после присвоения переподпишется шаблон заного, надо проверять .. )

сейчас все узнаем )

combineLatest(
  this.store.select(selectRanges),
  this.store.select(selectOccupations),
  this.store.select(selectCountries),
  this.store.select(selectBanks),
).subscribe(([ranges, occupations, countries, banks]) => {
  console.log(1)
  console.log(ranges, occupations, countries, banks);
});

Чтобы не писать подобной штуки с rxjs операторами, можно воспользоваться кастомным селектором:

export type SelectorMap<State, T> = {
  [P in keyof T]: Selector<State, T[P]>;
};
export type StateMap<T> = {
  [P in keyof T]: T[P];
}
export function createMapSelector<State, T>(
  selectorMap: SelectorMap<State, T>
): Selector<State, StateMap<T>> {
  let props = Object.entries(selectorMap);
  const selectors = props.map(([_, s]) => s).reverse();
  return createSelector.call(this, ...selectors, (...args) => {
    const entries = props.map(([key], i) => [key, args[i]]);
    return Object.fromEntries(entries);
  });
}

Это на вскорую руку, поэтому не очень чисто, и уверен, что можно нагуглить реализацию получше. Но зато позволяет делать вот так:

const myFooBarSelector = 
  createMapSelector({
    foo: selectFooBar,
    bar: selectFooFoo
  });

this.store.pipe(
  select(myFooBarSelector)
);

Очень толковый подход