Starts in:
2 DAYS
4 HRS
44 MIN
54 SEC
Starts in:
2 D
4 H
44 M
54 S
Open Closed

how to add abp tab in components i already seen manage profile tab documents i cant understand #6370


User avatar
0
smwasimraja@gmail.com created

how to add abp tab in components i already seen manage profile tab documents i cant understand can you provide me from basic like step by step i am new to this i need to understand properly


9 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello,

    Please follow the below steps

    1. create a new DemoComponent using below command
    ng generate component democomponent
    

    It will appear like this image at angular side

    1. create manage-profile-tabs.provider.ts file add the newly created DemoComponent to this file like

    1. Add manage-profile-tabs.provider to app.module.ts

    1. Add the desired code in demoComponent.html file no need to add code of abp-tab it will look like

    I hope this this will help you.

    thanks, Anjali

  • User Avatar
    0
    smwasimraja@gmail.com created

    Hello,

    Please follow the below steps

    1. create a new DemoComponent using below command
    ng generate component democomponent 
    

    It will appear like this image at angular side

    1. create manage-profile-tabs.provider.ts fileadd the newly created DemoComponent to this file like

    1. Add manage-profile-tabs.provider to app.module.ts

    1. Add the desired code in demoComponent.html file no need to add code of abp-tab it will look like

    I hope this this will help you.

    thanks, Anjali

    Hi Anjali,

    i have done all the above things still couldn't resolve the issue i have a question

    where did the MyUsertab comes from ? you didn't mention above screenshots

    i will provide my issues here

    - I have generated component called demoapplication and demo2application and i want these components to be tab section in another component , that component name called managedemocomponent, i have created manage-profile-tabs.provider.ts and i have included demoapplication and demo2application and i also added manage-profile-tabs.provider to app.module.ts i dont know what shoul i do next i am stuck here i need a solution above screenshot doesnt helped me

  • User Avatar
    0
    smwasimraja@gmail.com created

    Hello,

    Please follow the below steps

    1. create a new DemoComponent using below command
    ng generate component democomponent 
    

    It will appear like this image at angular side

    1. create manage-profile-tabs.provider.ts file
      add the newly created DemoComponent to this file like

    1. Add manage-profile-tabs.provider to app.module.ts

    1. Add the desired code in demoComponent.html file no need to add code of abp-tab it will look like

    I hope this this will help you.

    thanks, Anjali

    hi Anjali,

    Please look at the issue that i provided below to your answer

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello , Sorry for delay , once can you check this code

    1. create a new DemoComponent using below command
    ng generate component democomponent
    
    1. create manage-profile-tabs.provider.ts file add the newly created DemoComponent to this file like

    3.Add manage-profile-tabs.provider to app.module.ts

    4.Add the desired code in demoComponent.html file no need to add code of abp-tab it will look like

    After this if you have an error in demo.component.html page related to <abp-tabs> you can import CUSTOM_ELEMENTS_SCHEMA in app.module.ts file

    or

    you can add a custom html code in demo.component.html page

    Thanks,

  • User Avatar
    0
    sinan created
    Support Team Angular Developer

    if the solution above doesnt work, try to change your component standalone metada and try again.

    • if its not standalone then marked as standalone.
    • if its standalone then remove standalone metada.
  • User Avatar
    0
    smwasimraja@gmail.com created

    Hi,

    ![Screenshot (12).png](/QA/files/3a0fd5eaf4ed9d7de5c22368ba8850b7.png)

    i am seeing only blank page after i done all of the things that you mentioned above

  • User Avatar
    0
    smwasimraja@gmail.com created

    i need to set tab like this account and entity changes tabs

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hi,

    for that you need to create a new component in angular project and Use angular material to create tabs which will result like

    you can customize it as per your requirement.

    or you may check this code

    Thanks,

  • User Avatar
    0
    smwasimraja@gmail.com created

    Thanks much its working

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