How to conditionally display data using item templates in Angular ListBox?

2 mins read

Introduction

When working with data-driven components in Angular, such as the Syncfusion Angular ListBox, you may encounter scenarios where you need to display data conditionally within an item template. This article will guide you through the process of using Angular’s structural directives to control the rendering of data based on specific conditions.

Prerequisites

Basic knowledge of Angular and its templating syntax
Syncfusion Angular UI components installed in your project

Using `*ngIf` to Conditionally Render Data

The *ngIf directive in Angular is a powerful tool for controlling what gets rendered to the DOM. By applying *ngIf within an item template, you can include or exclude elements based on a condition.

Here’s an example of how to use *ngIf within an item template of a Syncfusion ListBox to exclude a specific item:

<ejs-listbox [dataSource]='data'>
    <ng-template #itemTemplate let-data>
        <div class="list-wrapper" *ngIf="data.text !== 'JavaScript'">
            <span class="e-avatar e-avatar-xlarge e-avatar-circle">
                <img src="https://ej2.syncfusion.com/angular/demos/assets/template/pic/{{data.pic}}.svg" alt="pic" />
            </span>
            <span class="text"> {{data.text}} </span>
            <span class="description"> {{data.description}} </span>
        </div>
    </ng-template>
</ejs-listbox>

In the above code snippet, the *ngIf directive checks if the text property of the data item is not equal to ‘JavaScript’. If the condition is true, the item is rendered; otherwise, it is excluded from the ListBox.

Data Source Example

The data source for the ListBox is an array of objects, each representing a different technology with a text label, an image, and a description:

this.data = [
    { text: 'JavaScript', pic: 'javascript', description: 'It is a lightweight interpreted or JIT-compiled programming language.' },
    { text: 'TypeScript', pic: 'typescript', description: 'It is a typed superset of Javascript that compiles to plain JavaScript.' },
    { text: 'Angular', pic: 'angular', description: 'It is a TypeScript-based open-source web application framework.' },
    { text: 'React', pic: 'react', description: 'A JavaScript library for building user interfaces. It can also render on the server using Node.' },
    { text: 'Vue', pic: 'vue', description: 'A progressive framework for building user interfaces. it is incrementally adoptable.' }
];

Demo

For a live demonstration, refer to the following sample link: Conditional ItemTemplate in ListBox

Additional References

Remember to check the official documentation for the most up-to-date information and best practices.

Conclusion

I hope you enjoyed learning about how to conditionally display data using item templates in Angular ListBox.

You can refer to our Angular ListBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular ListBox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)