Angular Replace Component #3667

guven.uysall created 2 years ago

ABP Framework version: v5.3.3
UI type: Angular
DB provider: EF Core
Tiered (MVC) or Identity Server Separated (Angular): no

There is a component A. It was created with Suite. There is a B component. It is a custom component that we created ourselves. How can I use component B instead of component A using replace component logic.

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement https://docs.abp.io/en/abp/latest/UI/Angular/How-Replaceable-Components-Work-with-Extensions

muhammedaltug created 2 years ago

Hello,

Can you give code examples to understand your question clearly? Created components by ABP Suite are page components(Eg: BookComponent). This component is loaded by routing. If you want the replace this component you need to configure generated routing.module like the following way;

{
    path: '',
    component: BookComponent,
    canActivate: [AuthGuard, PermissionGuard],
 }

{
    path: '',
    component: RouterOutletComponent,
    canActivate: [AuthGuard, PermissionGuard],
    children: [
      {
        path: '',
        component: ReplaceableRouteContainerComponent,
        data: {
          replaceableComponent: {
            key: 'YOUR_COMPONENT_KEY',
            defaultComponent: BookComponent,
          } as ReplaceableComponents.RouteData<BookComponent>,
        },
      },
    ],
  },

in your app component ts or you can do the same thing in APP_INITIALIZER provider factory.

import { ReplaceableComponentsService } from '@abp/ng.core';
import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  template: `
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
  `,
})
export class AppComponent {
  constructor(private replaceableComponent: ReplaceableComponentsService) {
    this.replaceableComponent.add({
      key: 'YOUR_COMPONENT_KEY',
      component: YOURCOMPONENT,
    });
  }
}