Hi Rohan,

Yes, you can customize the Angular classic component to work differently for different pages. Here are some approaches you can take to achieve the desired customization:

Custom Filters: To have different sets of filters for different pages, you can make the filters configurable by using input properties. For example, you can create an input property called filters and pass different filter configurations to the component based on the page. Inside the component, you can then use these filter configurations to display the appropriate filters.

Conditional Visibility: If you want to show/hide buttons based on specific requirements or for certain pages, you can use conditional rendering techniques. You can add boolean input properties to control the visibility of buttons and set their values based on the requirements or page context. Inside the component's template, you can use Angular's structural directives like ngIf to conditionally render or hide buttons based on these input properties.

Dynamic Redirection: If you want the "Create" button to redirect to different add pages based on the current page, you can again use input properties to pass the respective page URLs to the component. Inside the component's logic, you can handle the button click event and programmatically navigate to the appropriate add page using Angular's Router module.

You can customize the component to adapt to different pages with varying filters, button visibility, and redirection behaviors. Leverage Angular's component-based architecture and features like input properties, conditional rendering, and routing to achieve the desired customization.

If you need further assistance or have specific questions regarding implementation details, feel free to ask.

Hi Rohan,

We don't have a specific guide tailored to your exact scenario, but I can provide you with a general idea of how you can achieve the functionality you're looking for in Angular. Please note that the following code examples are simplified and you may need to adapt them to your specific implementation:

1. Custom Filters:
To have different sets of filters for different pages, you can create a component property to hold the filters and pass them from the parent component. For example:

// Inside the component class
 @Input() filters: any[] = [];

<!-- Inside the component template -->
 <div *ngFor="let filter of filters">
 <!-- Display the filter based on the filter configuration -->
 <input [type]="filter.type" [placeholder]="filter.placeholder"/>
 </div>

<button *ngIf="showButton1">Button 1</button>
 <button *ngIf="showButton2">Button 2</button>

import { Router } from "@angular/router";

 constructor(private router: Router) {}

 redirectToAddPage() {
 // Determine the appropriate add page URL based on the current page
 let addPageUrl: string;

 // Logic to set the addPageUrl based on the current page

 // Redirect to the add page
 this.router.navigate([addPageUrl]);
 }