How to hide implementation in angular?

Question

Python

The template displays a list. Some elements of this list should not be shown (depending on the mode, which is stored in the component's modeDisplay variable). The code in the template is something like this:

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

As you can see, the checkModeDisplay() function sets the visibility. It looks like this:

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;
  };

It is not necessary to delve into the understanding of the code, the question is somewhat different. The fact is that I would like a different solution (not necessarily a better one, just a different one - to broaden my horizons). I would like the visibility/invisibility condition to be handled differently.
For example, in angularJS it was possible to create a directive and pass to it the arguments that I pass to checkModeDisplay () in the presented solution. But in modern angular, as far as I know, this is not possible because the template directive is a new component. And creating a new component for such a simple situation is redundant.

Answer 1

The photos.get() method is called with the Community access key, as follows from the error message:

method is unavailable with group auth

You can learn more from the link above. In particular:
The service key is from the settings of your VK Application. The user key is obtained by clicking on the authorization link or is immediately transferred when the iFrame application is launched.

Answer 2

vk_api.exceptions.ApiError: [27]
Group authorization failed:
method is unavailable with group auth.

Answer 3

You really have a very ugly solution. It's smarter to do this:

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;
}

Display like this:

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

Answer 4

what's the problem with filtering todos before displaying them on the page?