Angular Component not rendering

Question

I am using the ng2-select component to extend another component - I called it my-dropdown-field. However the ng2-select component does not render for some reason. The issue does not seem to be in the ng2 control, but rather in the wrapper control I created. I am however not able to figure out what is causing this. There are no errors thrown either. If I use ng2-select on it's own its working fine. I created a reproducible stackblitz.

https://stackblitz.com/edit/ng2-select-angular2

If you run this, you will see there is no ng2-select control being rendered. If you comment out the below section from the app.component.html:

Doesn't work

<form [formGroup]="myGroup" (submit)="showForm()">
    <my-dropdown-field 
    name="country"
    [items]="items"
    [selectedItem]="active"
    formControlName="country">
    </my-dropdown-field>
  <button (click)="showForm()">Show</button>
</form>

and uncomment this from the top:

Works

<form [formGroup]="myGroup" (submit)="showForm()">
    <ng-select 
    name="country"
    [(ngModel)]="active"
    [(active)]="active"
    [items]="items"
    formControlName="country">
    </ng-select>
  <button (click)="showForm()">Show</button>
</form>

Then you will see that it works just fine.

Here is the link to the original ng2-select component:

https://github.com/valor-software/ng2-select

What am I missing?

IlyaSurmay · Accepted Answer · 2017-12-19 09:50:31Z

1

Your code doesn't work because you're overwriting ng2-select's property items. Originally it's a setter (https://github.com/valor-software/ng2-select/blob/development/src/select/select.ts#L269) so this line @Input() items: Array<string> = []; is changing original behavior.

A workaround in this situation is to use different name for this property (options, objects, etc) Here's working example https://stackblitz.com/edit/ng2-select-angular2-tof6ko?file=app/app.component.html

answered Dec 19, 2017 at 9:50

IlyaSurmay

2,33314 silver badges20 bronze badges

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

1 Comment

Sonu Kapoor Over a year ago

Yes, I see that was the issue. I also had to add the bootstrap.min.css. The stackblitz has been updated.

perseus · Accepted Answer · 2017-12-18 20:33:08Z

0

MyDropdownFieldComponent should implement ControlValueAccessor if you want that it works with ngModel and reactive forms.

[selectedItem] should not be an array or change the name

On AppComponent, create the form in ngOnInit instead of the constructor

answered Dec 18, 2017 at 20:33

perseus

1,4112 gold badges17 silver badges22 bronze badges

2 Comments

Sonu Kapoor Over a year ago

MyDropdownFieldComponent extends SelectComponent which implements ControlValueAccessor. Do I still need to manually implement it again? selectedItem is actually an array, according to the ng2-select documentation.

perseus Over a year ago

I think you don't need to implement the interface again, but you can override the methods of the interface according to your needs. I am reading: valor-software.com/ng2-select Try to double check every input and output and avoid double binding. Whatever is on: country: new FormControl('', []) should initialize the dropdown. If you put: country: new FormControl('Australia', []). Your active should be Australia. Australia should appear on writeValue method if you do a console log there

Collectives™ on Stack Overflow

Angular Component not rendering

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related