CODEWITHSUNDEEP
javascriptangulartypescript
Davidson Lima
Davidson Lima

Reputation: 859

Angular - How to reuse a component in a different level?

Imagine we have this component structure:

app1
-- app1.component.html
-- app1.component.ts

parent1
    parent2
        app2
        -- app2.component.html
        -- app2.component.ts

How could I reuse the app2 component in the app1? For example, reuse a table (both HTML and logic on typescript) instead of copy and paste code.

I have searched for solutions like ng-template, but failed. Also, call the tag didn't work as well.

Upvotes: 0

Views: 1093

Answers (2)

Todor Pavlovic
Todor Pavlovic

Reputation: 160

If the tag didn't work inside app1 I assume that you are importing app2 component inside another module. If we want to use component over multiple modules you need to import app2 ONLY in shared module then import that module to modules where you want to have that component.

Make sure to export that component inside shared module.

Upvotes: 2

V.Tur
V.Tur

Reputation: 1427

Need to use componentFactoryResolver https://angular.io/guide/dynamic-component-loader For example you want to use ThirdComponent inside FirstComponent

//HTML
<section #firstComp></section>

//TS
import { AfterViewInit, Component, ComponentFactoryResolver, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ThirdComponent } from '../third/third.component';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss']
})
export class FirstComponent implements OnInit, AfterViewInit {
  @ViewChild('firstComp',{read: ViewContainerRef}) firstComp: ViewContainerRef;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit(): void {    

  }

ngAfterViewInit() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ThirdComponent);
  const componentRef = this.firstComp.createComponent<ThirdComponent>(componentFactory);
}
}

Upvotes: 1

Related Questions