Concealing objects with ngFor iteration

Question

Concealing objects with ngFor iteration

I need help with filtering out certain items from a list I am receiving from the backend before displaying them in the UI.

https://i.sstatic.net/D0hQm.png

Specifically, I do not want to show "Conference" and "Reception" in the UI. Here is the HTML code snippet:

<ng-container *ngFor="let space of space_name">
    <div *ngIf="space">
      <a class="dropdown-item text-light" [routerLink]="['/spaces']"
         routerLinkActive="current"
         [queryParams]="{space_name:space}" data-toggle="collapse"
         data-target=".navbar-collapse.show"
         style="background-color: #8d0528;">{{ space | uppercase }}</a>
    </div>
</ng-container>

And here is the TypeScript code snippet:

this.sharedService.getDropdownspace().subscribe(data => {
  this.spaceDropdown = data;
  this.api_data = Object.values(this.spaceDropdown);
  this.space_name = this.api_data[0];
})

Can you please suggest an approach for achieving this filtering requirement?

javascript angular typescript

Answer 1

Answer №1

If you want to achieve the same outcome, you can utilize the array filter method. Simply set up a function within your component and apply it to the *ngFor directive as illustrated below.

Inside your component, establish a filtering function for the desired results.

filter(itemList: room_name[]): room_name[] {
    let result: room_name[] = [];
    result = itemList.filter(item => {
        return (item != "Conference Room" && item != "Reception Room")
    });
    return result;
}

Within your template file

<ng-container *ngFor="let room of filter(room_name)">
    <div *ngIf="room">
        <a class="dropdown-item text-light" [routerLink]="['/rooms']" routerLinkActive="current" [queryParams]="{room_name:room}" data-toggle="collapse" data-target=".navbar-collapse.show" style="background-color: #8d0528;">{{ room | uppercase }}</a>
    </div>
</ng-container>

Check out the code and demo here: https://jsfiddle.net/ybdmrL2z/

Answer 2

If you want to achieve the same outcome, you can utilize the array filter method. Simply set up a function within your component and apply it to the *ngFor directive as illustrated below.

Inside your component, establish a filtering function for the desired results.

filter(itemList: room_name[]): room_name[] {
    let result: room_name[] = [];
    result = itemList.filter(item => {
        return (item != "Conference Room" && item != "Reception Room")
    });
    return result;
}

Within your template file

<ng-container *ngFor="let room of filter(room_name)">
    <div *ngIf="room">
        <a class="dropdown-item text-light" [routerLink]="['/rooms']" routerLinkActive="current" [queryParams]="{room_name:room}" data-toggle="collapse" data-target=".navbar-collapse.show" style="background-color: #8d0528;">{{ room | uppercase }}</a>
    </div>
</ng-container>

Check out the code and demo here: https://jsfiddle.net/ybdmrL2z/

Concealing objects with ngFor iteration

Answer №1

Similar questions

Issue with Vue.js 2.0 transition not triggering on changing routes dynamically

Set the styling of a div element in the Angular template when the application is first initialized

Why do I keep receiving the error "jquery_1.default is not a function" while trying to import jQuery using SystemJS

Issue with Multer s3 upload: File not functioning properly in s3 and size increase of file

Are there any alternatives to using the $size function in MongoDB for this specific tier in Atlas?

Checking for undefined based on certain conditions

Is there a way to include a React component within the setContent method of Leaflet?

If I click on a different VueJS menu, make sure to close the current menu

Is it possible for Promise.all to accept an array containing only non-Promise elements?

Retrieving the latest entry from the MySQL database

We are considering implementing Angular 2, however our current application is built with Angular 1.x. Are there any resources available for integrating Angular 2 with Angular 1.x?

Prevent the use of redirection in a post request

Can an image or SVG be included with every selectize option?

Design a webpage using material-ui components

I am having trouble making this specific type generic. The type "x" is not able to index type "y" ts(2536)

Verifying Angular Select List Options

JavaScript - Issues with Cookie Setting

Unraveling JSON data within an AngularJS controller

No bugs appeared in Next.js

Add a new element dynamically and update its content on the fly