Angular 11: How can I declare an array containing Angular components

Question

I want to create a list inside an Angular component that displays the content from other components. I am trying to declare an array containing Angular components like so:

import { Component, Input, OnInit } from '@angular/core';
import { FirstComponent } from './components/first/first.component';
import { SecondComponent } from './components/second/second.component';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit {
  tabs = [
    {
      name: 'First',
      content: FirstComponent
    },
    {
      name: 'Second',
      content: SecondComponent
    }
  ];

  ngOnInit(): void {
  }

}

in order to use it in the HTML file like so:

<ul>
  <li *ngFor="let tab of tabs">
    {{ tab.name }}
    {{ tab.content }}
  </li>
</ul>

I know the code above isn't functional, but I was wondering if it's possible to do something like this, and if it isn't, what is the proper solution to obtain the same effect.

Answer 1

You will have to make use of Angular Router. First you have to configure Angular router by specifying paths for each component. Then use these paths in an array to switch between each components. Dont forget the router outlet tag to output the component.

pathList = ["/first-component", "/second-component"];

<ul *ngFor="let path of pathList">
    <li><a routerLink="path">{{path}}</a></li>
</ul>

Answer 2

Can be achieved using portal refer to the link .
Kindly refer below code

@Component({
  selector: 'tempComponent1',
  template: '<p>component1</p>'
})
export class tempComponent1 {}
@Component({
  selector: 'tempComponent2',
  template: '<p>component2</p>'
})
export class tempComponent2 {}

import {
  ComponentPortal,
  DomPortal,
  Portal,
  TemplatePortal
} from '@angular/cdk/portal';
import {
  AfterViewInit,
  Component,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
  ElementRef
} from '@angular/core';

/**
 * @title Portal overview
 */
@Component({
  selector: 'cdk-portal-overview-example',
  templateUrl: 'cdk-portal-overview-example.html',
  styleUrls: ['cdk-portal-overview-example.css']
})
export class CdkPortalOverviewExample implements AfterViewInit {
  @ViewChild('templatePortalContent') templatePortalContent: TemplateRef<
    unknown
  >;
  @ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;

  selectedPortal: Portal<any>;
  componentPortal: ComponentPortal<tempComponent1>;
  componentPortal2: ComponentPortal<tempComponent2>;
  templatePortal: TemplatePortal<any>;
  domPortal: DomPortal<any>;

  constructor(private _viewContainerRef: ViewContainerRef) {}

  ngAfterViewInit() {
    this.componentPortal = new ComponentPortal(tempComponent1);
    this.componentPortal2 = new ComponentPortal(tempComponent2);
  }
}

@Component({
  selector: 'component-portal-example',
  template: 'Hello, this is a component portal'
})
export class ComponentPortalExample {}  

---

<h2>The portal outlet is below:</h2>
<div class="example-portal-outlet">
  <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
</div>
<ng-template #templatePortalContent
  >Hello, this is a template portal</ng-template
>

<button (click)="selectedPortal = componentPortal">
  Render component portal
</button>
<button (click)="selectedPortal = componentPortal2">
  Render template portal
</button>

Stackblitz code