Open Closed

Angular UI: Layout Customization #114


User avatar
0
vishalnikam created
  1. How to use abp-table tag with or without sorting and paging in Angular UI .

  2. How to change menu icon in Angular UI .

  3. How to customize default main menu and user menu in Angular UI .


7 Answer(s)
  • User Avatar
    0
    Mehmet created

    Hi vishalnikam,

    1. You can see the abp-table usage in BookStore tutorial.

    abp-table accepts the [rows] input for pagination. If you can pass a rows value, the pagination will be appear.

    For sorting:

    • Add two variables named sortKey and sortOrder to your component
    • Add [abpTableSort] input to abp-table tag like below:
    <abp-table [abpTableSort]="{ key: sortKey, order: sortOrder }" ...>
    
    • Update the th element like below:
    <th (click)="sortOrderIcon.sort('name')">
      Name
      <abp-sort-order-icon
        #sortOrderIcon
        sortKey="name"
        [(selectedSortKey)]="sortKey"
        [(order)]="sortOrder"
      ></abp-sort-order-icon>
    </th>
    

    I created a gist to learn how to implement the sorting: https://gist.github.com/mehmet-erim/bfe2820cb9cbd0a70610dc477f568312

    1. Lepton theme uses two logos for each style. You can change these logos with your own logos without changing the filenames in the angular/src/assets/images/logo folder. Login page uses theme{x}-reverse.png

    2. We will add documentation for menu customization soon. I'll add the documentation link to here.

  • User Avatar
    0
    vishalnikam created

    Hi,

    Which component should be replaced for menu and user profile?

    Thanks, Vishal Nikam

  • User Avatar
    0
    Mehmet created

    Menu and user profile sections are in the ApplicationLayoutComponent. We will split these sections into components.

  • User Avatar
    0
    vishalnikam created

    I download theme source code through ABP suite but i dont find source code for Angular UI componet like ApplicationLayoutComponent, Which i can refer to create new replacable component. Please guid.

  • User Avatar
    0
    yekalkan created
    Support Team Fullstack Developer

    Hi @vishalnikam,

    There was an issue but it is resolved now. Can you please delete the "Volo.LeptonTheme" cache files in "%USERPROFILE%/.abp/templates" folder and download again? Then you can get angular source code of lepton theme.

  • User Avatar
    0
    vishalnikam created

    As per documentation, ApplicationLayoutComponent can be replaced using key: Theme.ApplicationLayoutComponent. is Theme.ApplicationLayoutComponent key need to import from @volo/abp.ng.theme.lepton ? i didnt find this key.

  • User Avatar
    0
    Mehmet created

    You should import as shown below:

    import { eThemeLeptonComponents } from '@volo/abp.ng.theme.lepton'
    
    this.store.dispatch(
      new AddReplaceableComponent({
        component: MyApplicationLayoutComponent,
        key: eThemeLeptonComponents.ApplicationLayout,
      }),
    );
    

    Make sure the @volo/abp.ng.theme.lepton v2.6.0 is installed. If you still can't import, you can pass key as the 'Theme.ApplicationLayoutComponent'.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11