Mixing
How to display customized dropdown in angular 5
1
I am trying to display items in dropdown using ng-select in Angular 5. But the dropdown component that I am designing should be more generic in nature meaning people who are calling my dropdown should be able to pass customized template for displaying items in dropdown. i.e. the items list in dropdown should be build with specific template and a call to my generic dropdown should display the customized list of items. Is this something that can be achieved in transclusion? Currently I am using "dropdownVal" which is of String datatype but instead I need to have array of template/component.
My code is below
dropdown.component.ts
@Component({
selector: 'wdsk-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
@Input() dropdownVal: string;
@Input() placeholder: string;
@Output() selectedItem = new EventEmitter();
constructor() { }
ngOnInit() {
}
onSelect(value: any) {
this.selectedItem.emit(value);
}
}
Template - dropdown.component.html
<div class="col-md-12 account-dropdown">
<div class="form-group row">
<div class="col-md-12">
<ngx-select tabindex="0" placeholder={{placeholder}} [items]="dropdownVal" (selected)="onSelect($event)">
</ngx-select>
</div>
</div>
</div>
angular angular5 angular2-template angular-ngselect
asked Nov 21 '18 at 20:48
NicolasNicolas
267
add a comment |
1
I am trying to display items in dropdown using ng-select in Angular 5. But the dropdown component that I am designing should be more generic in nature meaning people who are calling my dropdown should be able to pass customized template for displaying items in dropdown. i.e. the items list in dropdown should be build with specific template and a call to my generic dropdown should display the customized list of items. Is this something that can be achieved in transclusion? Currently I am using "dropdownVal" which is of String datatype but instead I need to have array of template/component.
My code is below
dropdown.component.ts
@Component({
selector: 'wdsk-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
@Input() dropdownVal: string;
@Input() placeholder: string;
@Output() selectedItem = new EventEmitter();
constructor() { }
ngOnInit() {
}
onSelect(value: any) {
this.selectedItem.emit(value);
}
}
Template - dropdown.component.html
<div class="col-md-12 account-dropdown">
<div class="form-group row">
<div class="col-md-12">
<ngx-select tabindex="0" placeholder={{placeholder}} [items]="dropdownVal" (selected)="onSelect($event)">
</ngx-select>
</div>
</div>
</div>
angular angular5 angular2-template angular-ngselect
asked Nov 21 '18 at 20:48
NicolasNicolas
267
Just add<ng-content></ng-content>inside the dropdown.component.html wherever you want the customised content to display, and pass whatever you want to display inside thewdsk-dropdowntags
– user184994
Nov 21 '18 at 20:51
i have a solution for this, but it is using the mat-select element from angular-materials... does that count? :)
– JBoothUA
Nov 21 '18 at 21:03
i guess i might share my solution just in case it helps at all
– JBoothUA
Nov 21 '18 at 21:04
Thanks for response but will the data inside <ng-content></ng-content> will appear under dropdown? How to link the [items] directive of ngx-select to the contents of <ng-content></ng-content> so that the data in <ng-content></ng-content> is listed as dropdown items. Also [items] accepts Array of data.
– Nicolas
Nov 21 '18 at 21:07
1
@JBoothUA, please share your solution
– Nicolas
Nov 21 '18 at 21:10
add a comment |
1
1
1
I am trying to display items in dropdown using ng-select in Angular 5. But the dropdown component that I am designing should be more generic in nature meaning people who are calling my dropdown should be able to pass customized template for displaying items in dropdown. i.e. the items list in dropdown should be build with specific template and a call to my generic dropdown should display the customized list of items. Is this something that can be achieved in transclusion? Currently I am using "dropdownVal" which is of String datatype but instead I need to have array of template/component.
My code is below
dropdown.component.ts
@Component({
selector: 'wdsk-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
@Input() dropdownVal: string;
@Input() placeholder: string;
@Output() selectedItem = new EventEmitter();
constructor() { }
ngOnInit() {
}
onSelect(value: any) {
this.selectedItem.emit(value);
}
}
Template - dropdown.component.html
<div class="col-md-12 account-dropdown">
<div class="form-group row">
<div class="col-md-12">
<ngx-select tabindex="0" placeholder={{placeholder}} [items]="dropdownVal" (selected)="onSelect($event)">
</ngx-select>
</div>
</div>
</div>
angular angular5 angular2-template angular-ngselect
asked Nov 21 '18 at 20:48
NicolasNicolas
267
I am trying to display items in dropdown using ng-select in Angular 5. But the dropdown component that I am designing should be more generic in nature meaning people who are calling my dropdown should be able to pass customized template for displaying items in dropdown. i.e. the items list in dropdown should be build with specific template and a call to my generic dropdown should display the customized list of items. Is this something that can be achieved in transclusion? Currently I am using "dropdownVal" which is of String datatype but instead I need to have array of template/component.
My code is below
dropdown.component.ts
@Component({
selector: 'wdsk-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent implements OnInit {
@Input() dropdownVal: string;
@Input() placeholder: string;
@Output() selectedItem = new EventEmitter();
constructor() { }
ngOnInit() {
}
onSelect(value: any) {
this.selectedItem.emit(value);
}
}
Template - dropdown.component.html
<div class="col-md-12 account-dropdown">
<div class="form-group row">
<div class="col-md-12">
<ngx-select tabindex="0" placeholder={{placeholder}} [items]="dropdownVal" (selected)="onSelect($event)">
</ngx-select>
</div>
</div>
</div>
angular angular5 angular2-template angular-ngselect
angular angular5 angular2-template angular-ngselect
asked Nov 21 '18 at 20:48
NicolasNicolas
267
asked Nov 21 '18 at 20:48
NicolasNicolas
267
asked Nov 21 '18 at 20:48
NicolasNicolas
267
asked Nov 21 '18 at 20:48
NicolasNicolas
267
asked Nov 21 '18 at 20:48
NicolasNicolas
267
267
Just add<ng-content></ng-content>inside the dropdown.component.html wherever you want the customised content to display, and pass whatever you want to display inside thewdsk-dropdowntags
– user184994
Nov 21 '18 at 20:51
i have a solution for this, but it is using the mat-select element from angular-materials... does that count? :)
– JBoothUA
Nov 21 '18 at 21:03
i guess i might share my solution just in case it helps at all
– JBoothUA
Nov 21 '18 at 21:04
Thanks for response but will the data inside <ng-content></ng-content> will appear under dropdown? How to link the [items] directive of ngx-select to the contents of <ng-content></ng-content> so that the data in <ng-content></ng-content> is listed as dropdown items. Also [items] accepts Array of data.
– Nicolas
Nov 21 '18 at 21:07
1
@JBoothUA, please share your solution
– Nicolas
Nov 21 '18 at 21:10
add a comment |
Just add<ng-content></ng-content>inside the dropdown.component.html wherever you want the customised content to display, and pass whatever you want to display inside thewdsk-dropdowntags
– user184994
Nov 21 '18 at 20:51
i have a solution for this, but it is using the mat-select element from angular-materials... does that count? :)
– JBoothUA
Nov 21 '18 at 21:03
i guess i might share my solution just in case it helps at all
– JBoothUA
Nov 21 '18 at 21:04
Thanks for response but will the data inside <ng-content></ng-content> will appear under dropdown? How to link the [items] directive of ngx-select to the contents of <ng-content></ng-content> so that the data in <ng-content></ng-content> is listed as dropdown items. Also [items] accepts Array of data.
– Nicolas
Nov 21 '18 at 21:07
1
@JBoothUA, please share your solution
– Nicolas
Nov 21 '18 at 21:10
Just add
<ng-content></ng-content> inside the dropdown.component.html wherever you want the customised content to display, and pass whatever you want to display inside the wdsk-dropdown tags– user184994
Nov 21 '18 at 20:51
Just add
<ng-content></ng-content> inside the dropdown.component.html wherever you want the customised content to display, and pass whatever you want to display inside the wdsk-dropdown tags– user184994
Nov 21 '18 at 20:51
i have a solution for this, but it is using the mat-select element from angular-materials... does that count? :)
– JBoothUA
Nov 21 '18 at 21:03
i have a solution for this, but it is using the mat-select element from angular-materials... does that count? :)
– JBoothUA
Nov 21 '18 at 21:03
i guess i might share my solution just in case it helps at all
– JBoothUA
Nov 21 '18 at 21:04
i guess i might share my solution just in case it helps at all
– JBoothUA
Nov 21 '18 at 21:04
Thanks for response but will the data inside <ng-content></ng-content> will appear under dropdown? How to link the [items] directive of ngx-select to the contents of <ng-content></ng-content> so that the data in <ng-content></ng-content> is listed as dropdown items. Also [items] accepts Array of data.
– Nicolas
Nov 21 '18 at 21:07
Thanks for response but will the data inside <ng-content></ng-content> will appear under dropdown? How to link the [items] directive of ngx-select to the contents of <ng-content></ng-content> so that the data in <ng-content></ng-content> is listed as dropdown items. Also [items] accepts Array of data.
– Nicolas
Nov 21 '18 at 21:07
1
1
@JBoothUA, please share your solution
– Nicolas
Nov 21 '18 at 21:10
@JBoothUA, please share your solution
– Nicolas
Nov 21 '18 at 21:10
add a comment |
1 Answer
1
active
oldest
votes
1
I have done this before with Angular Material's mat-select element, using @ContentChildren and ng-template.
Working Example Here
dropdown.ts
import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, ContentChildren, QueryList , TemplateRef} from '@angular/core';
import { MatSelectChange, MatSelect } from '@angular/material/select';
// Template Sections
@Component({
selector: 'custom-dropdown-item',
template: '<ng-template #content><ng-content></ng-content></ng-template>'
})
export class CustomDropdownItemsComponent {
@ViewChild('content') content: any;
@Input() value: any;
@Input() width: string;
@Input() height: string;
@Output() click: EventEmitter<any> = new EventEmitter();
onClick() {
this.click.emit(this.value);
}
}
@Component({
selector: 'custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
@ViewChild('matSelect') matSelect: MatSelect;
@Output() valueChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
@Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() value: any;
@Input() items: string;
@Input() placeholder: string;
@Input() dropdownTitle: string;
@Input() addDynamicContent: boolean = false;
@Input() compareWith: Function;
defaultCompareWithFn: Function = function () { };
selectedIndex = -1;
@ContentChildren(CustomDropdownItemsComponent)
ddItems:QueryList<CustomDropdownItemsComponent>;
constructor() { }
ngOnInit() {
}
valueChanged(event: MatSelectChange) {
this.valueChange.emit(event.value);
}
}
dropdown.html
<mat-select #matSelect [(value)]="value" (selectionChange)="valueChanged($event)">
<mat-option style="width:100px" [value]="0">
<h1 style="color:red">I'm content = 0</h1>
</mat-option>
<mat-option [style.width]="ddlItem.width" [value]="i+1" *ngFor="let ddlItem of ddItems; let i = index">
<ng-container [ngTemplateOutlet]="ddlItem.content"></ng-container>
</mat-option>
</mat-select>
Passing in custom items:
<div class="mat-app-background basic-container" style="width:200px; padding:0; margin:0">
<custom-dropdown [addDynamicContent]="true" [(value)]="selected">
<custom-dropdown-item width="100px">
<span style="color:green">I'm dynamic content = 1</span>
</custom-dropdown-item>
<custom-dropdown-item width="100px">
<p style="color:blue">I'm dynamic content = 2</p>
</custom-dropdown-item>
</custom-dropdown>
</div>
<div>
Selected: {{ selected }}
</div>
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
1
Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select
– Nicolas
Nov 22 '18 at 3:03
1
@Nicolas if you can create a stackblitz with ngx-select i can take a look at it
– JBoothUA
Nov 22 '18 at 4:34
@Nicolas maybe the same tactics will work with ngx-select?
– JBoothUA
Nov 27 '18 at 16:33
I'm newbie to this, really not sure if it works but wanted to achieve this with ngx-select.
– Nicolas
Nov 27 '18 at 16:47
1
Can you take a look at my stackblitz ngdropdown
– Nicolas
Nov 28 '18 at 15:08
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420246%2fhow-to-display-customized-dropdown-in-angular-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I have done this before with Angular Material's mat-select element, using @ContentChildren and ng-template.
Working Example Here
dropdown.ts
import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, ContentChildren, QueryList , TemplateRef} from '@angular/core';
import { MatSelectChange, MatSelect } from '@angular/material/select';
// Template Sections
@Component({
selector: 'custom-dropdown-item',
template: '<ng-template #content><ng-content></ng-content></ng-template>'
})
export class CustomDropdownItemsComponent {
@ViewChild('content') content: any;
@Input() value: any;
@Input() width: string;
@Input() height: string;
@Output() click: EventEmitter<any> = new EventEmitter();
onClick() {
this.click.emit(this.value);
}
}
@Component({
selector: 'custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
@ViewChild('matSelect') matSelect: MatSelect;
@Output() valueChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
@Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() value: any;
@Input() items: string;
@Input() placeholder: string;
@Input() dropdownTitle: string;
@Input() addDynamicContent: boolean = false;
@Input() compareWith: Function;
defaultCompareWithFn: Function = function () { };
selectedIndex = -1;
@ContentChildren(CustomDropdownItemsComponent)
ddItems:QueryList<CustomDropdownItemsComponent>;
constructor() { }
ngOnInit() {
}
valueChanged(event: MatSelectChange) {
this.valueChange.emit(event.value);
}
}
dropdown.html
<mat-select #matSelect [(value)]="value" (selectionChange)="valueChanged($event)">
<mat-option style="width:100px" [value]="0">
<h1 style="color:red">I'm content = 0</h1>
</mat-option>
<mat-option [style.width]="ddlItem.width" [value]="i+1" *ngFor="let ddlItem of ddItems; let i = index">
<ng-container [ngTemplateOutlet]="ddlItem.content"></ng-container>
</mat-option>
</mat-select>
Passing in custom items:
<div class="mat-app-background basic-container" style="width:200px; padding:0; margin:0">
<custom-dropdown [addDynamicContent]="true" [(value)]="selected">
<custom-dropdown-item width="100px">
<span style="color:green">I'm dynamic content = 1</span>
</custom-dropdown-item>
<custom-dropdown-item width="100px">
<p style="color:blue">I'm dynamic content = 2</p>
</custom-dropdown-item>
</custom-dropdown>
</div>
<div>
Selected: {{ selected }}
</div>
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
1
Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select
– Nicolas
Nov 22 '18 at 3:03
1
@Nicolas if you can create a stackblitz with ngx-select i can take a look at it
– JBoothUA
Nov 22 '18 at 4:34
@Nicolas maybe the same tactics will work with ngx-select?
– JBoothUA
Nov 27 '18 at 16:33
I'm newbie to this, really not sure if it works but wanted to achieve this with ngx-select.
– Nicolas
Nov 27 '18 at 16:47
1
Can you take a look at my stackblitz ngdropdown
– Nicolas
Nov 28 '18 at 15:08
|
show 3 more comments
1
I have done this before with Angular Material's mat-select element, using @ContentChildren and ng-template.
Working Example Here
dropdown.ts
import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, ContentChildren, QueryList , TemplateRef} from '@angular/core';
import { MatSelectChange, MatSelect } from '@angular/material/select';
// Template Sections
@Component({
selector: 'custom-dropdown-item',
template: '<ng-template #content><ng-content></ng-content></ng-template>'
})
export class CustomDropdownItemsComponent {
@ViewChild('content') content: any;
@Input() value: any;
@Input() width: string;
@Input() height: string;
@Output() click: EventEmitter<any> = new EventEmitter();
onClick() {
this.click.emit(this.value);
}
}
@Component({
selector: 'custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
@ViewChild('matSelect') matSelect: MatSelect;
@Output() valueChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
@Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() value: any;
@Input() items: string;
@Input() placeholder: string;
@Input() dropdownTitle: string;
@Input() addDynamicContent: boolean = false;
@Input() compareWith: Function;
defaultCompareWithFn: Function = function () { };
selectedIndex = -1;
@ContentChildren(CustomDropdownItemsComponent)
ddItems:QueryList<CustomDropdownItemsComponent>;
constructor() { }
ngOnInit() {
}
valueChanged(event: MatSelectChange) {
this.valueChange.emit(event.value);
}
}
dropdown.html
<mat-select #matSelect [(value)]="value" (selectionChange)="valueChanged($event)">
<mat-option style="width:100px" [value]="0">
<h1 style="color:red">I'm content = 0</h1>
</mat-option>
<mat-option [style.width]="ddlItem.width" [value]="i+1" *ngFor="let ddlItem of ddItems; let i = index">
<ng-container [ngTemplateOutlet]="ddlItem.content"></ng-container>
</mat-option>
</mat-select>
Passing in custom items:
<div class="mat-app-background basic-container" style="width:200px; padding:0; margin:0">
<custom-dropdown [addDynamicContent]="true" [(value)]="selected">
<custom-dropdown-item width="100px">
<span style="color:green">I'm dynamic content = 1</span>
</custom-dropdown-item>
<custom-dropdown-item width="100px">
<p style="color:blue">I'm dynamic content = 2</p>
</custom-dropdown-item>
</custom-dropdown>
</div>
<div>
Selected: {{ selected }}
</div>
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
1
Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select
– Nicolas
Nov 22 '18 at 3:03
1
@Nicolas if you can create a stackblitz with ngx-select i can take a look at it
– JBoothUA
Nov 22 '18 at 4:34
@Nicolas maybe the same tactics will work with ngx-select?
– JBoothUA
Nov 27 '18 at 16:33
I'm newbie to this, really not sure if it works but wanted to achieve this with ngx-select.
– Nicolas
Nov 27 '18 at 16:47
1
Can you take a look at my stackblitz ngdropdown
– Nicolas
Nov 28 '18 at 15:08
|
show 3 more comments
1
1
1
I have done this before with Angular Material's mat-select element, using @ContentChildren and ng-template.
Working Example Here
dropdown.ts
import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, ContentChildren, QueryList , TemplateRef} from '@angular/core';
import { MatSelectChange, MatSelect } from '@angular/material/select';
// Template Sections
@Component({
selector: 'custom-dropdown-item',
template: '<ng-template #content><ng-content></ng-content></ng-template>'
})
export class CustomDropdownItemsComponent {
@ViewChild('content') content: any;
@Input() value: any;
@Input() width: string;
@Input() height: string;
@Output() click: EventEmitter<any> = new EventEmitter();
onClick() {
this.click.emit(this.value);
}
}
@Component({
selector: 'custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
@ViewChild('matSelect') matSelect: MatSelect;
@Output() valueChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
@Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() value: any;
@Input() items: string;
@Input() placeholder: string;
@Input() dropdownTitle: string;
@Input() addDynamicContent: boolean = false;
@Input() compareWith: Function;
defaultCompareWithFn: Function = function () { };
selectedIndex = -1;
@ContentChildren(CustomDropdownItemsComponent)
ddItems:QueryList<CustomDropdownItemsComponent>;
constructor() { }
ngOnInit() {
}
valueChanged(event: MatSelectChange) {
this.valueChange.emit(event.value);
}
}
dropdown.html
<mat-select #matSelect [(value)]="value" (selectionChange)="valueChanged($event)">
<mat-option style="width:100px" [value]="0">
<h1 style="color:red">I'm content = 0</h1>
</mat-option>
<mat-option [style.width]="ddlItem.width" [value]="i+1" *ngFor="let ddlItem of ddItems; let i = index">
<ng-container [ngTemplateOutlet]="ddlItem.content"></ng-container>
</mat-option>
</mat-select>
Passing in custom items:
<div class="mat-app-background basic-container" style="width:200px; padding:0; margin:0">
<custom-dropdown [addDynamicContent]="true" [(value)]="selected">
<custom-dropdown-item width="100px">
<span style="color:green">I'm dynamic content = 1</span>
</custom-dropdown-item>
<custom-dropdown-item width="100px">
<p style="color:blue">I'm dynamic content = 2</p>
</custom-dropdown-item>
</custom-dropdown>
</div>
<div>
Selected: {{ selected }}
</div>
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
I have done this before with Angular Material's mat-select element, using @ContentChildren and ng-template.
Working Example Here
dropdown.ts
import { Component, OnInit, Input, ViewEncapsulation, Output, EventEmitter, ViewChild, ContentChildren, QueryList , TemplateRef} from '@angular/core';
import { MatSelectChange, MatSelect } from '@angular/material/select';
// Template Sections
@Component({
selector: 'custom-dropdown-item',
template: '<ng-template #content><ng-content></ng-content></ng-template>'
})
export class CustomDropdownItemsComponent {
@ViewChild('content') content: any;
@Input() value: any;
@Input() width: string;
@Input() height: string;
@Output() click: EventEmitter<any> = new EventEmitter();
onClick() {
this.click.emit(this.value);
}
}
@Component({
selector: 'custom-dropdown',
templateUrl: './custom-dropdown.component.html',
styleUrls: ['./custom-dropdown.component.scss']
})
export class CustomDropdownComponent implements OnInit {
@ViewChild('matSelect') matSelect: MatSelect;
@Output() valueChange: EventEmitter<MatSelectChange> = new EventEmitter<MatSelectChange>();
@Output() openedChange: EventEmitter<boolean> = new EventEmitter<boolean>();
@Input() value: any;
@Input() items: string;
@Input() placeholder: string;
@Input() dropdownTitle: string;
@Input() addDynamicContent: boolean = false;
@Input() compareWith: Function;
defaultCompareWithFn: Function = function () { };
selectedIndex = -1;
@ContentChildren(CustomDropdownItemsComponent)
ddItems:QueryList<CustomDropdownItemsComponent>;
constructor() { }
ngOnInit() {
}
valueChanged(event: MatSelectChange) {
this.valueChange.emit(event.value);
}
}
dropdown.html
<mat-select #matSelect [(value)]="value" (selectionChange)="valueChanged($event)">
<mat-option style="width:100px" [value]="0">
<h1 style="color:red">I'm content = 0</h1>
</mat-option>
<mat-option [style.width]="ddlItem.width" [value]="i+1" *ngFor="let ddlItem of ddItems; let i = index">
<ng-container [ngTemplateOutlet]="ddlItem.content"></ng-container>
</mat-option>
</mat-select>
Passing in custom items:
<div class="mat-app-background basic-container" style="width:200px; padding:0; margin:0">
<custom-dropdown [addDynamicContent]="true" [(value)]="selected">
<custom-dropdown-item width="100px">
<span style="color:green">I'm dynamic content = 1</span>
</custom-dropdown-item>
<custom-dropdown-item width="100px">
<p style="color:blue">I'm dynamic content = 2</p>
</custom-dropdown-item>
</custom-dropdown>
</div>
<div>
Selected: {{ selected }}
</div>
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
answered Nov 21 '18 at 21:10
JBoothUAJBoothUA
880425
880425
1
Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select
– Nicolas
Nov 22 '18 at 3:03
1
@Nicolas if you can create a stackblitz with ngx-select i can take a look at it
– JBoothUA
Nov 22 '18 at 4:34
@Nicolas maybe the same tactics will work with ngx-select?
– JBoothUA
Nov 27 '18 at 16:33
I'm newbie to this, really not sure if it works but wanted to achieve this with ngx-select.
– Nicolas
Nov 27 '18 at 16:47
1
Can you take a look at my stackblitz ngdropdown
– Nicolas
Nov 28 '18 at 15:08
|
show 3 more comments
1
Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select
– Nicolas
Nov 22 '18 at 3:03
1
@Nicolas if you can create a stackblitz with ngx-select i can take a look at it
– JBoothUA
Nov 22 '18 at 4:34
@Nicolas maybe the same tactics will work with ngx-select?
– JBoothUA
Nov 27 '18 at 16:33
I'm newbie to this, really not sure if it works but wanted to achieve this with ngx-select.
– Nicolas
Nov 27 '18 at 16:47
1
Can you take a look at my stackblitz ngdropdown
– Nicolas
Nov 28 '18 at 15:08
1
1
Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select
– Nicolas
Nov 22 '18 at 3:03
Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select
– Nicolas
Nov 22 '18 at 3:03
1
1
@Nicolas if you can create a stackblitz with ngx-select i can take a look at it
– JBoothUA
Nov 22 '18 at 4:34
@Nicolas if you can create a stackblitz with ngx-select i can take a look at it
– JBoothUA
Nov 22 '18 at 4:34
@Nicolas maybe the same tactics will work with ngx-select?
– JBoothUA
Nov 27 '18 at 16:33
@Nicolas maybe the same tactics will work with ngx-select?
– JBoothUA
Nov 27 '18 at 16:33
I'm newbie to this, really not sure if it works but wanted to achieve this with ngx-select.
– Nicolas
Nov 27 '18 at 16:47
I'm newbie to this, really not sure if it works but wanted to achieve this with ngx-select.
– Nicolas
Nov 27 '18 at 16:47
1
1
Can you take a look at my stackblitz ngdropdown
– Nicolas
Nov 28 '18 at 15:08
Can you take a look at my stackblitz ngdropdown
– Nicolas
Nov 28 '18 at 15:08
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420246%2fhow-to-display-customized-dropdown-in-angular-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Just add
<ng-content></ng-content>inside the dropdown.component.html wherever you want the customised content to display, and pass whatever you want to display inside thewdsk-dropdowntags– user184994
Nov 21 '18 at 20:51
i have a solution for this, but it is using the mat-select element from angular-materials... does that count? :)
– JBoothUA
Nov 21 '18 at 21:03
i guess i might share my solution just in case it helps at all
– JBoothUA
Nov 21 '18 at 21:04
Thanks for response but will the data inside <ng-content></ng-content> will appear under dropdown? How to link the [items] directive of ngx-select to the contents of <ng-content></ng-content> so that the data in <ng-content></ng-content> is listed as dropdown items. Also [items] accepts Array of data.
– Nicolas
Nov 21 '18 at 21:07
1
@JBoothUA, please share your solution
– Nicolas
Nov 21 '18 at 21:10