Как скрыть реализацию в angular?

Question

[zlodiak]

В шаблоне выводится список. Некоторые элементы этого списка не должны показываться(зависит от режима, который хранится в переменной компонента modeDisplay). Код в шаблоне приблизительно такой:

<div  class="inner item" *ngFor="let todo of todos" [ngClass]="{hidden: checkModeDisplay(todo.fields.isCompleted)}">
  ...........
</div>

Как видите, видимость устанавливает функция checkModeDisplay(). Выглядит она так:

private modeDisplay: string = 'all';

  private checkModeDisplay(isCompleted): boolean {
    let hidden = false;

    if(this.modeDisplay == 'active' && isCompleted) {
      hidden = true;
    } 

    if(this.modeDisplay == 'completed' && !isCompleted) {
      hidden = true;
    }     

    return hidden;
  };

Углубляться в понимание кода не надо, вопрос несколько в другом. Дело в том, что мне хотелось бы другого решения(не обязательно лучшего, просто другого - для расширения кругозора). Я хотел бы чтобы условие видимости/невидимости отрабатывалось другим образом.

Например, в angularJS можно было создать директиву и передавать в неё те аргументы, которые я в представленном решении передаю в checkModeDisplay(). Но в современном angular, насколько я знаю, такое невозможно потому что директива с шаблоном это - новый компонент. А создавать новый компонент для такой простой ситуации это избыточно.

Answer 1

[Виталий]

У вас действительно очень некрасивое решение. Грамотнее сделать так:

get displayedTodos() {
  if (this.modeDisplay == 'active')
    return this.todos.filter(todo => !todo.fields.isCompleted);

  if (this.modeDisplay == 'completed')
    return this.todos.filter(todo => todo.fields.isCompleted);

  return this.todos;
}

Отображать так:

<div  class="inner item" *ngFor="let todo of displayedTodos">
  ...........
</div>

Answer 2

[Coder321]

в чем проблема отфильтровать todoы перед тем как выводить на страницу?