How to display customized dropdown in angular 5

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>

asked Nov 21 '18 at 20:48

Nicolas

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

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>

asked Nov 21 '18 at 20:48

Nicolas

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

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>

asked Nov 21 '18 at 20:48

Nicolas

267

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

Nicolas

267

asked Nov 21 '18 at 20:48

Nicolas

267

asked Nov 21 '18 at 20:48

Nicolas

267

asked Nov 21 '18 at 20:48

Nicolas

267

asked Nov 21 '18 at 20:48

Nicolas

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

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

@JBoothUA, please share your solution

– Nicolas
Nov 21 '18 at 21:10

add a comment |

1 Answer
1

active

oldest

votes

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

JBoothUA

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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

JBoothUA

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

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

JBoothUA

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

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

JBoothUA

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

JBoothUA

880425

answered Nov 21 '18 at 21:10

JBoothUA

880425

answered Nov 21 '18 at 21:10

JBoothUA

880425

answered Nov 21 '18 at 21:10

JBoothUA

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

Thanks @JBoothUA, your solution helps but unfortunately I've to implement the same using ngx-select

– Nicolas
Nov 22 '18 at 3:03

@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

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu