Angular: Dynamic creation of components in HTML doesn't work - html

Question

I am able to dynamically create components:
import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '#angular/core';
import { FilterComponent } from '../filter/filter.component';
export enum FilterType {
DateRangeFilter, SensorSelectFilter
}
#Component({
selector: 'app-filter-collection',
templateUrl: './filter-collection.component.html',
styleUrls: ['./filter-collection.component.css']
})
export class FilterCollectionComponent implements OnInit {
filters: Array<ComponentRef<FilterComponent>> = [];
#ViewChild("messagecontainer", { read: ViewContainerRef }) entry!: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) { }
onAddDateRangeFilter() {
const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
const filter = this.entry.createComponent<FilterComponent>(factory);
filter.instance.filter = FilterType.DateRangeFilter;
this.filters.push(filter);
}
onAddSensorSelectFilter() {
const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
const filter = this.entry.createComponent<FilterComponent>(factory);
filter.instance.filter = FilterType.SensorSelectFilter;
this.filters.push(filter);
}
ngOnInit(): void {
}
}
while FilterComponent looks like this:
#Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.css']
})
export class FilterComponent {
#Input() filter!: FilterType;
_FilterType = FilterType;
range = new FormGroup({
start: new FormControl(),
end: new FormControl()
});
constructor() {
}
ngOnInit(): void {
}
}
with this HTML:
<div *ngIf="filter === _FilterType.SensorSelectFilter">
<mat-form-field class="sensorFilter" appearance="fill">
<mat-label>Cars</mat-label>
<select matNativeControl required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</mat-form-field>
</div>
<div *ngIf="filter === _FilterType.DateRangeFilter">
<mat-form-field class="dateFilter" appearance="fill">
<mat-label>Enter a date range to filter data</mat-label>
<mat-date-range-input [formGroup]="range" [rangePicker]="picker">
<input matStartDate formControlName="start" placeholder="Start date">
<input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
</mat-form-field>
</div>
However, I am not sure how to instantiate those components into HTML, I tried it like this in FilterCollectionComponent.html:
<div *ngFor="let filter of filters">
<app-filter [filter]="filter.instance.filter"></app-filter>
</div>
But this doesn't work.
Any ideas why? Any help is very much appreciated!

Answer 1

filter-collection.component.html:
<div #dynamicFilters></div>
filter-collection.component.ts
import { Component, ComponentFactory, ComponentFactoryResolver, ComponentRef, OnInit, ViewChild, ViewContainerRef } from '#angular/core';
import { FilterComponent } from '../filter/filter.component';
export enum FilterType {
DateRangeFilter, SensorSelectFilter
}
#Component({
selector: 'app-filter-collection',
templateUrl: './filter-collection.component.html',
styleUrls: ['./filter-collection.component.css']
})
export class FilterCollectionComponent implements OnInit {
filters : Array<ComponentRef<FilterComponent>> = [];
#ViewChild('dynamicFilters', { read: ViewContainerRef }) dynamicInsert!: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) { }
onAddDateRangeFilter() {
const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
const filter = this.dynamicInsert.createComponent<FilterComponent>(factory);
filter.instance.filter = FilterType.DateRangeFilter;
this.filters.push(filter);
}
onAddSensorSelectFilter() {
const factory: ComponentFactory<FilterComponent> = this.resolver.resolveComponentFactory(FilterComponent);
const filter = this.dynamicInsert.createComponent<FilterComponent>(factory);
filter.instance.filter = FilterType.SensorSelectFilter;
this.filters.push(filter);
}
ngOnInit(): void {
}
}