How to change component name dynamically in angular?

Question

The following is a custom component:

<app-variable-component-1></app-variable-component-1>

So my idea is as the user changes the input i.e clicks or select option then the current selected value will be stored in a property inside the parent component.

Like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.less']
})
export class ParentComponentComponent implements OnInit {

currentOption = 1

  constructor() { }

  ngOnInit(): void {
  }

onSelectOption(option) {
this.currentOption = option
}

}

using this property I want to change the component dynamically. I know I could have used *ngIf for each item like this:

<app-variable-component-1 *ngIf="currentOption === '1'"></app-variable-component-1>
<app-variable-component-2 *ngIf="currentOption === '2'"></app-variable-component-2>
<app-variable-component-3 *ngIf="currentOption === '3'"></app-variable-component-3>

But instead I want to shorten the code something like this:

<app-variable-component-{{currentOption}} ></app-variable-component-{{currentOption}}>

Is something similar possible in angular?

You can use ngSwitch, but what you have there is not possible — bryan60
– bryan60, Commented Sep 25, 2020 at 19:50

bryan60 · Accepted Answer · 2020-09-25 19:53:19Z

1

what you have is not doable, you can use ngSwitch though to clean it up a bit:

<div [ngSwitch]="currentOption">
  <app-variable-component-1 *ngSwitchCase="'1'"></app-variable-component-1>
  <app-variable-component-2 *ngSwitchCase="'2'"></app-variable-component-2>
  <app-variable-component-3 *ngSwitchCase="'3'"></app-variable-component-3>
</div>

relying on selector names like that is generally not going to scale very well either way and will be difficult to maintain in a larger app.

answered Sep 25, 2020 at 19:53

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bryan60 Over a year ago

it's not at all repetition of code. It's a switch statement.

mx_code Over a year ago

if this is possible .. that willl be great : <app-variable-component-{{currentOption}} ></app-variable-component-{{currentOption}}>

bryan60 Over a year ago

as I said, it is not possible nor would it even be advisable. You would have a difficult to maintain and error prone application.

mx_code Over a year ago

yeah... but this is more simpler ... right.... is there a way to create custom function or directive to achive like this <app-variable-component-{{currentOption}} ></app-variable-component-{{currentOption}}>

bryan60 Over a year ago

For the final time. NO, it is not possible.... it is less keystrokes, but it is not simpler nor is it better practice. You would have no way of checking your templates for validity as the variable could change or the selectors could change. This makes your application prone to breaks or failures. less code is not strictly better if it introduces opportunity for errors. The only other thing you could really consider doing is abstracting this switch into a single app-variable-switch component of some kind that has this switch inside it and accepts input, but this adds other complexity.

Bruno Cunha · Accepted Answer · 2020-09-25 20:04:34Z

1

I don't know if that way is possible, but you can instance dynamic component with ngComponentOutlet directive. You pass the active component in directive.

In HTML:

<ng-container *ngComponentOutlet="activeComponent"></ng-container>

In TS:

import { Component1 } from './../component1';
import { Component2 } from './../component2';


/** ...SOME DECLARATIONS HERE.... **/

get activeComponent() {
 switch(this.currentOption) {
   case 1: return Component1;
   case 2 : return Component2;
 }
}

answered Sep 25, 2020 at 20:04

Bruno Cunha

2822 silver badges5 bronze badges

3 Comments

Derek Menénedez Over a year ago

If you have a switch inside that... for what not use ngswitch or for what not use ngif in the html... it's the same but with ngComponentOutlet more complicated and unnecessary

Bruno Cunha Over a year ago

But *ngSwitch and *ngIf you have to put all components in HTML, and I think he didn't want that way.

Derek Menénedez Over a year ago

I know...but It's not what he wants, it's what is well done

Collectives™ on Stack Overflow

How to change component name dynamically in angular?

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related