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

9 Answer(s)

• 

  0

  Anjali_Musmade created 2 years ago

  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

  

  2. 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

  

  I hope this this will help you.

  thanks, Anjali

  Save Cancel
• 

  0

  smwasimraja@gmail.com created 2 years ago

  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

  

  2. create manage-profile-tabs.provider.ts fileadd 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

  

  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

  Save Cancel
• 

  0

  smwasimraja@gmail.com created 2 years ago

  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

  

  2. 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

  

  I hope this this will help you.

  thanks, Anjali

  hi Anjali,

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

  Save Cancel
• 

  0

  Anjali_Musmade created one year ago

  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
  

  2. 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,

  Save Cancel
• 

  0

  sinan created one year ago

  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.

  Save Cancel
• 

  0

  smwasimraja@gmail.com created one year ago

  Hi,

  

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

  Save Cancel
• 

  0

  smwasimraja@gmail.com created one year ago

  

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

  Save Cancel
• 

  0

  Anjali_Musmade created one year ago

  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,

  Save Cancel
• 

  0

  smwasimraja@gmail.com created one year ago

  Thanks much its working

  Save Cancel