Custom Angular Component Not Rendering

I am trying to create a custom reusable component based on material angular I have the following code dropdown.component.ts

import {MatSelectModule} from "@angular/material/select";
import {MyOptionComponent} from "./dropdown-options.component";


@Component({
selector: 'app-dropdown',
standalone: true,
imports: [
MatSelectModule,
MyOptionComponent
],
template: `<mat-select><ng-content></ng-content></mat-select>`,
styleUrl: './dropdown.component.scss'
})
export class DropdownComponent implements AfterContentInit{
ngAfterContentInit(): void {
console.warn('AfterContentInit', this.children);
}
@ContentChildren(MyOptionComponent) children!: QueryList<MyOptionComponent>;

}


dropdown dropdown-options.component.ts


@Component({
selector: 'my-option',
standalone: true,
template: `<option value="{{value}}">{{label}}</option>`,
})
export class MyOptionComponent {
@Input() label: string = ''; // Display text
@Input() value: any; // Value for the dropdown
}


then I try to use it with:

<app-dropdown>
<my-option label="test" value="1" ></my-option>
<my-option label="test" value="1" ></my-option>
<my-option label="test" value="1" ></my-option>
</app-dropdown>


The console.warn('AfterContentInit', this.children); brings back the child elements, but they never show in the DOM

Anyone have any idea what I'm missing?

Continue reading...