I'm using ng2-select2 in my Angular2 project and I want to add some style such as width, height, border-radius, font-weight, font-size, ... but I couldn't manage it.
My Html code is like:
<select2 [data]="exampleData"></select2>
I also tried adding class and id to my select2 element, but it doesn't work. Do you have any idea how can I do that?
If you want to use "width", you can use it with Select2Options class.
In your component just define one object of Select2Options:
let options: Select2Options;
Set the attribute that you want:
this.optionsSelect = {
placeholder: "Select option...",
allowClear: true,
width: "100%"
}
In your html, put the [options] input with the name of your option:
<select2 [data]="seccion" [cssImport]="true" (valueChanged)="onSeccionChange($event)" [options]="optionsSelect"></select2>
With this class you can customize some things, for example: add a placeholder, or allow to keep the select without selection.
In my case , I'm trying to change background-color but I can't find a solution.
dropdownCss: {backgroundColor: 'red'}You could try to customize component
@Component({
selector: "your-component",
templateUrl: "your-template.component.html",
styles: [`
:host >>> .select2-container {
min-width: 1000px;
}
`]
})
you have to use width attribute as mentioned there in the repo description like this
<select2 [width]="dynamic_width"></select2>
refer from here
https://github.com/NejcZdovc/ng2-select2#inputs
else you can use ngStyle or ngClass for dynamic binding to style (PS:- Not Tested)
