angular classic component

Hi,

Can I customize the classic component in way that works differently for different pages, it seems it is common for all the pages for the demo, whether it is Dashboard, Layout builder or any.

1. Say for example for Page 1 I have some set of filters and for Page 2 they are different
2. also for some of the pages I dont want those buttons visible at all or different buttons according to the requirement
3. for different pages I want Create to be redirected to the respective add pages

click here for image
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

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.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle