In my app, I have load dynamic values in dropdown list of ng2-smart-table. Now I have to enable multiple selection in dropdown in ng2-smart-table.
Note: Multiple selection in dropdown not for checkbox.
I think you can try with your own custom editor component. I've added a basic select with a multiple attribute, but you can create a custom component more complex as you prefer.
Pass data to your component with valuePrepareFunction and voila.
settings.ts
private settings = {
// Previous config ...
columns: {
multiple: {
title: 'Multi select',
type: 'html',
editor: {
type: 'custom',
valuePrepareFunction: (cell, row) => row,
component: MultiSelComponent,
},
}
}
}
multiSel.component.html
<select multiple [(ngModel)]="yourModelStore">
<option *ngFor="let item of myValues" [value]="item.value">{{item.name}}</option>
</select>
multiSel.component.ts
import { Component, Input, OnInit } from '#angular/core';
import { ViewCell } from 'ng2-smart-table';
....
export class MultiSelComponent implements OnInit {
#Input() value;
yourModelStore: any; // rendered as this.yourModelStore = ['value', 'value'];
ngOnInit() {
this.myValues = this.value;
}
module.ts
declarations:[
//others ...
MultiSelComponent
]
entryComponents: [
MultiSelComponent
]
**I've edit the answer and added more infos on setting and component.ts
yourField: {
title: 'Your field title',
editor: {
type: 'list',
config: {
selectText: 'Select',
list: [
{ value: '1', title: 'Admin' },
{ value: '2', title: 'Manager' },
],
},
},
type: 'number',
},
Related
I have this JSON schema, I tried to populate multiple select component with the uniform autoform.
(() => {
const ajv = new Ajv({ allErrors: true, useDefaults: true, keywords: ["uniforms"] });
const schema = {
title: 'Address',
type: 'object',
properties: {
city: {
type: 'string',
uniforms: {
options: [
{ label: 'New York', value: 'new york' },
{ label: 'Nashville', value: 'nashville' },
],
},
},
}
};
function createValidator(schema) {
const validator = ajv.compile(schema);
return (model) => {
validator(model);
if (validator.errors && validator.errors.length) {
return { details: validator.errors };
}
};
}
const schemaValidator = createValidator(schema);
return new JSONSchemaBridge(schema, schemaValidator);
})()
And the result look like this
Rendered component with this JSON schema
The multiselect component example from antd
could I render multiselect component instead select component (which default from uniform)?
Can I select new york and nashville at the same time?
I want to see information when I click to row in the table. I tried #click, router:to but it didn't help. Maybe I should try to make list item instead of data-table?
html code:
<v-data-table v-scroll:#scroll-target="onScroll"
:items-per-page="-1"
hide-default-footer
dense
:headers="headers"
:items="companies"
item-key="name"
class="elevation-1"
></v-data-table>
Vue code below:
<script>
export default {
data: () => ({
companies: [
{
name: "Company",
status: "Active"
},
{
name: "Company2",
status: "Active"
},
{
name: "Company3",
status: "Active"
},
],
headers: [
{
text: "Company name",
align: "start",
sortable: false,
value: "name"
},
{ text: "Status", value: "status" }
],
methods: {
onScroll (e) {
this.companies = e.target.scrollTop
},
}
})
};
</script>
I am using vuetify library. Maybe this is a problem of vuetify and it has different command to make clickeble row in data-table?
Checkout the vuetify data table events: https://vuetifyjs.com/en/components/data-tables/
The first one there is click:row.
So you would have something like:
// template
<v-data-table #click:row="rowClicked"></v-data-table>
// script
export default {
methods: {
rowClicked (item) {
// show something or do your router stuff here
}
}
}
Hope that helps.
I am using ng-material-multilevel-menu plugin to create multilevel dropdown. I am following this article, but getting below runtime error
Can't bind to 'configuration'
since it isn't a known property of 'ng-material-multilevel-menu'.
1. If 'configuration' is an Angular directive, then add 'CommonModule' to the '#NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
Can't bind to 'items' since it isn't a known property of
'ng-material-multilevel-menu'.
1. If 'items' is an Angular directive, then add 'CommonModule' to the '#NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
'ng-material-multilevel-menu' is not a known element:
1. If 'ng-material-multilevel-menu' is an Angular component, then verify that it is part of this module.
2. If 'ng-material-multilevel-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
to suppress this message.
This is my code in .html file
<div>
<ng-material-multilevel-menu [configuration]='config' [items]='appitems' (selectedItem)="selectedItem($event)">
</ng-material-multilevel-menu>
</div>
This is my code in .ts file
import { Component, OnInit, NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';
import { AppComponent } from '../app.component';
#Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
#NgModule({
declarations: [
],
imports: [
BrowserModule,
NgMaterialMultilevelMenuModule // Import here
],
providers: [],
bootstrap: [AppComponent]
})
export class ProductsComponent implements OnInit {
constructor(private employeeService: ProductService) {
}
ngOnInit() {
var appitems = [
{
label: 'Item 1 (with Font awesome icon)',
faIcon: 'fab fa-500px',
items: [
{
label: 'Item 1.1',
link: '/item-1-1',
faIcon: 'fab fa-accusoft'
},
{
label: 'Item 1.2',
faIcon: 'fab fa-accessible-icon',
items: [
{
label: 'Item 1.2.1',
link: '/item-1-2-1',
faIcon: 'fas fa-allergies'
},
{
label: 'Item 1.2.2',
faIcon: 'fas fa-ambulance',
items: [
{
label: 'Item 1.2.2.1',
link: 'item-1-2-2-1',
faIcon: 'fas fa-anchor'
}
]
}
]
}
]
},
];
});
}
How can I solve this issue?
Remove #NgModule section from this component file. Add NgMaterialMultilevelMenuModule in imports section of your app.module.ts file.
And declare appitems as global variable above the constructor like below:
export class ProductsComponent implements OnInit {
appitems: any = [];
constructor(private employeeService: ProductService) {
}
ngOnInit() {
this.appitems = [
{
label: 'Item 1 (with Font awesome icon)',
faIcon: 'fab fa-500px',
items: [
{
label: 'Item 1.1',
link: '/item-1-1',
faIcon: 'fab fa-accusoft'
},
{
label: 'Item 1.2',
faIcon: 'fab fa-accessible-icon',
items: [
{
label: 'Item 1.2.1',
link: '/item-1-2-1',
faIcon: 'fas fa-allergies'
},
{
label: 'Item 1.2.2',
faIcon: 'fas fa-ambulance',
items: [
{
label: 'Item 1.2.2.1',
link: 'item-1-2-2-1',
faIcon: 'fas fa-anchor'
}
]
}
]
}
]
},
];
});
}
First: Do not use var, just use it like this appitems=[...]
Second: You did not declare the config variable in your controller.
Third: You need to add the NgMaterialMultilevelMenuModule in the AppModule class not in the component you created.
Just define config in your ProductsComponent :
config = {
paddingAtStart: true,
interfaceWithRoute: true,
classname: 'my-custom-class',
listBackgroundColor: `rgb(208, 241, 239)`,
fontColor: `rgb(8, 54, 71)`,
backgroundColor: `rgb(208, 241, 239)`,
selectedListFontColor: `red`,
highlightOnSelect: true,
collapseOnSelect: true,
rtlLayout: false
};
I have several components that all do the same thing:
display a form (the form varies though, so the HTML differs for each)
capture the form
validate and send the form using a REST API
There are certain things I'm looking to share among the components. For example, the forms all have a list of RadioButtons with the following values:
#Input() radioList: Object[] = [
{ label: 'Unsatisfactory', value: 1 },
{ label: 'Needs Improvement', value: 2 },
{ label: 'Meets Expectations', value: 3 },
{ label: 'Exceeds Expectations', value: 4 },
{ label: 'Outstanding', value: 5 }
];
Is there any way to share stuff like this so if I want to edit that RadioList, I don't have to do it four times?
Extend class?
//property and property-level annotations (#Input) will be picked up by ancestors
export abstract class RadioListAwareComponent{
#Input() radioList: Object[] = [
{ label: 'Unsatisfactory', value: 1 },
{ label: 'Needs Improvement', value: 2 },
{ label: 'Meets Expectations', value: 3 },
{ label: 'Exceeds Expectations', value: 4 },
{ label: 'Outstanding', value: 5 }
];
}
#Component({
template: `<div>Comp1</div>`
})
export class RadioListImplComponentONE extends RadioListAwareComponent{}
#Component({
template: `<div>Comp2</div>`
})
export class RadioListImplComponentTWO extends RadioListAwareComponent{}
You can make your own factory and inject it into your controller https://docs.angularjs.org/guide/providers
I want to create chart based on the JSON data.
I using angular2-highcharts my ChartsMain component looks like:
#Component({
moduleId: module.id,
selector: 'charts',
templateUrl: 'charts.html',
directives: [CHART_DIRECTIVES,]
providers: [DataService]
})
export class ChartsMain {
result: Data[];
constructor(DataService:DataService) {
DataService.getData().subscribe(res => this.result = res);
this.options = {
chart: {
type: "candlestick"
},
title: {
text: "JSON data"
},
xAxis: {
type: "category",
allowDecimals: false,
title: {
text: ""
}
},
yAxis: {
title: {
text: "Number"
}
},
series: [{
name: "Hour",
data: this.result
}]
};
}
options: Object;
And my DataService looks:
#Injectable()
export class DataService {
http: Http;
constructor(http: Http) {
this.http = http;
}
getData(): Observable<Array<Data>> {
return this.http.get('http://JSON-DATA')
.map(this.extractData)
.catch(this.handleError)
}
private extractData(res: Response) {
let body = res.json();
return body || { };
}
private handleError(error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
let errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error(errMsg); // log to console instead
return Observable.throw(errMsg);
}
}
My chart
Where is a problem, why is chart empty? How do I fill the chart with JSON data. JSON data must be in any specific format?
A candlestick chart is typically used to present the open, high, low and close price over a period of time..
Sample expected JSON format looks like this-
[
[1250553600000,23.09,23.46,23.06,23.43],
[1250640000000,23.25,23.61,23.21,23.51],
[1250726400000,23.57,23.82,23.52,23.76],
[1250812800000,23.95,24.20,23.83,24.17],
[1251072000000,24.30,24.39,24.04,24.15],
[1251158400000,24.21,24.42,24.16,24.20],
[1251244800000,24.13,24.22,23.82,23.92],
[1251331200000,24.11,24.22,23.55,24.21],
[1251417600000,24.61,24.64,24.08,24.29],
[1251676800000,24.02,24.12,23.79,24.03],
]
Here is sample component with candlestick highchart-
import { Component } from '#angular/core';
import {JSONP_PROVIDERS, Jsonp} from '#angular/http';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
#Component({
selector: 'high-chart',
directives: [CHART_DIRECTIVES],
providers: [JSONP_PROVIDERS],
template: `
<h2> This is HighChart CandleStick component </h2>
<chart type="StockChart" [options]="options3"></chart>
`
})
export class HighChartsComponent {
options3: Object;
constructor(jsonp : Jsonp) {
jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => {
this.options3 = {
title : { text : 'CandleSticks' },
rangeSelector : {
selected : 1
},
series : [{
type : 'candlestick',
name : 'CandleSticks',
data : res.json(),
dataGrouping : {
units : [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
},
tooltip: {
valueDecimals: 2
}
}]
};
});
}
EDIT:
In your case you are not setting chart options inside subscribe. You should set like this-
this._http.get('http://knowstack.com/webtech/charts_demo/data.json')
.map(this.extractData)
.subscribe((response) => {
this.options = {
title : { text : 'knowstack' },
series : [{
name : 'knowstack',
data : response.json()
}]
};
},
(error) => {
this.errorMessage = <any>error
});
Please note - data from knowstack will only work with simple charts (not candlestick)
EDIT 2: column chart
Please refer below configuration. This is how you can use column chart.
this.options1 = {
title : { text : 'simple column chart' },
series: [{
type : 'column',
data: [["Maths",15],["Physics",16],["Biology",18],["Chemistry",19]]
}]
};
EDIT 3: sample of key-value pair json
import { Component } from '#angular/core';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
#Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
styles: [`
chart {
display: block;
}
`]
template: `<chart [options]="options"></chart>`
})
class AppComponent {
constructor() {
var data = [{"key":"Math","value":98},{"key":"Physics","value":78},{"key":"Biology","value":70},{"key":"Chemistry","value":90},{"key":"Literature","value":79}];
this.options = {
title : { text : 'simple chart' },
xAxis: {
type: 'category'
},
series: [{
data: data.map(function (point) {
return [point.key, point.value];
})
}]
};
}
options: Object;
}
Ok it is work. I use service which in my first post, I just changed component: constructor(http: Http, jsonp : Jsonp, DataService:DataService) {
DataService.getData().subscribe(res => this.result = res);
http.request('').subscribe(res => {
this.options = {
chart: {
type: 'column'
},
plotOptions: {
column: {
zones: [{
value: 12,
},{
color: 'red'
}]
}
},
series: [{
data: this.result
}]
};
});
}
options: Object;
in this case json data: [{"key":"Math","value":98},{"key":"Physics","value":78},{"key":"Biology","value":70},{"key":"Chemistry","value":90},{"key":"Literature","value":79}]
How can I split this data like there http://www.knowstack.com/webtech/charts_demo/highchartsdemo4.html