Custom Angular Component Not Rendering

Question

I am trying to create a custom reusable component based on material angular.

I have the following code dropdown.component.ts

import {AfterContentInit, Component, ContentChildren, QueryList, ViewChildren} from '@angular/core';
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

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

@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?

Mat-select should go with mat-option, not <option> html element — Thuan Tran
– Thuan Tran, Commented Dec 13, 2024 at 9:27

IgorK · Accepted Answer · 2024-12-13 22:12:14Z

0

did you check console on possible errors? If there is no errors, other possible reason of not rendering is ChangeDetection strategy such as onPush, you need change it to onDefault or use markForCheck() method in a place when you need rendering

   import { Component, ChangeDetectorRef } from '@angular/core';
    
    @Component({
      selector: 'app-example',
      template: `
        <p>Count: {{ count }}</p>
        <button (click)="increment()">Increment</button>
      `,
      changeDetection: ChangeDetectionStrategy.OnPush 
    })
    export class ExampleComponent {
      count = 0;
    
      constructor(private cdr: ChangeDetectorRef) {}
    
      increment() {
        this.count++;
        // Manually trigger change detection
        this.cdr.markForCheck(); 
      }
    }

answered Dec 13, 2024 at 22:12

IgorK

1441 silver badge8 bronze badges

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

Comments

wolfman928 · Accepted Answer · 2024-12-17 13:01:54Z

0

I figured it out; you can't use material elements like this, you have to use a *ngFor

answered Dec 17, 2024 at 13:01

wolfman928

3646 silver badges15 bronze badges

Comments

Khizer Hayat · Accepted Answer · 2024-12-13 08:09:54Z

-1

Check your imports if parent component(comoponent whose html you shared) has imported dropdown component in imports. check the ts file of the parent component, look for missing import there, for this component, if everything looks fine but still not working, show me the parent component where you are using this dropdown ts and htlm also the routes file for the module the parent component is a part of.

answered Dec 13, 2024 at 8:09

Khizer Hayat

395 bronze badges

Collectives™ on Stack Overflow

Custom Angular Component Not Rendering

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related