How to filter a class in Angular?

Issue

I'm trying to show in a list the projects whose method "arduino" is equal to true (it's a boolean).

I tried to do *ngFor and *ngIf on the same line but it gives an error, so when doing it on another line, the system loads the projects whose method "arduino" is equal to 'false' too, so it doesn't work well

How can I filter it from component.ts so that only projects with method project.arduino = true are loaded?

Here is the code in component.ts

@Component({
  selector: 'app-arduino-projects',
  templateUrl: './arduino-projects.component.html',
  styleUrls: ['./arduino-projects.component.css'],

  providers: [ProjectService]

})
export class ArduinoProjectsComponent implements OnInit {

  public projects: Project[];
  public url: string;

  constructor(
    private _projectService: ProjectService
  ) {
    this.projects = [];
    this.url = Global.url;
   }

  ngOnInit(): void {
    this.getProjects();
  }

  getProjects(){
    this._projectService.getProjects().subscribe(
      response => {
        if(response.projects){
          this.projects = response.projects; **************** this is the property that I have to filter and I don't know how to do it
        }
      },
      error => {
        console.log(error)
      }
    )
  }

And here is the relevant code in component.html

<div class="project-list">
        <ul>
            <li *ngFor="let project of projects" class="project">
              <ng-container *ngIf="project.arduino == true"> ************ Here i filtered it in that way
                    <a [routerLink]="['/project', project._id]">
            
                    <div class="image-box">
                        <div class="image">
                        <img src="{{ url+'get-image/'+project.imagefront }}" *ngIf="project.imagefront" />
                        </div>
                    </div>
                  </a>
              </ng-container>
            </li>
        </ul>
      </div>

In this way it is loading the projects whose project.arduino = false, it does not show them on the screen but it messes up the list in the browser

I'm using Angular 13

Thank you very much!

Solution

You can move the *ngFor to the <ng-container> instead of the *ngIf. Then move the *ngIf to <li> tag. To make sure only those <li> are in DOM which the condition as true.

<div class="project-list">
  <ul>
    <ng-container *ngFor="let project of projects">
      <li *ngIf="project.arduino == true" class="project">
        <a [routerLink]="['/project', project._id]">
          <div class="image-box">
            <div class="image">
              <img src="{{ url+'get-image/'+project.imagefront }}" *ngIf="project.imagefront" />
            </div>
          </div>
        </a>
      </li>
    </ng-container>
  </ul>
</div>

Answered By - HassanMoin