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
Related
I'm using i18n(v9) to translate a lot of text in a big react project. It's working as intended in cases like:
<Intro
title={details.title}
subtitle={t('resume-upload subtitle')}
description={t('resume-upload description 2')}
/>
However, In a form component that uses these 2 imports:
import { Form } from 'mobx-react-form';
import validatorjs from 'validatorjs';
When I try to translate labels within the code like this:
setup() {
const { t } = this.props;
return {
fields: [
{
name: 'step',
value: 0
},
{
name: 'firstName',
label: t('Firstname'),
rules: 'required|string|between:2,25'
},
{
name: 'lastName',
label: t('Achternaam'),
rules: 'required|string|between:2,25'
},
{
name: 'emailaddress',
label: t('Email'),
rules: 'required|email|string'
},
{
name: 'phonenumber',
label: t('Telephone number'),
rules: 'required|string|telephone'
},
{
name: 'cv',
label: t('resume')
},
{
name: 'terms',
label: 'Terms',
value: false
},
{
name: 'newFile',
label: '',
value: true
},
{
name: 'noFile',
label: '',
value: false
}
]
};
}
}
export default withNamespaces()(UploadForm);
The t function gives an error in a parent file:
TypeError: form.values is not a function
Is there a way to translate json files like the way I'm attempting?
I want to use multiple radio buttons.there are 10 questions with each question having a unique id and each question have 5 options with each option having unique id.I want to store selected values using formcontrolname. what is the best approach ??
the questions and options format is
questions:
[
{
id: 1
title: "questiontitle1"
options: [
{
id: 1,
name: "optionname1"
},
{
id: 2,
name: "optionname2"
}
]
},
{
id: 2
title: "questiontitle2"
options: [
{
id: 1,
name: "optionname1"
},
{
id: 2,
name: "optionname2"
}
]
}
]
html code is
Take a look at Form Array.
A FormArray is responsible for managing a collection of AbstractControl, which can be a FormGroup, a FormControl, or another FormArray.
A great tutorial to follow step by step.
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',
},
I am completly new to HTML/Angular.
I was following the basic tutorial from the angular website (https://angular2-tree.readme.io/docs#basic-usage).
The problem I now have is that I do not understand how I call the tree in my HTML file with the statement from the website:
<tree-root [nodes]="nodes" [options]="options"></tree-root>
To me it is not clear how the output class is important/defines the nodes that are in the tree and what the JSON "code" below the statement means. Any help is greatly appreciated!
EDIT: my component.ts class
#Component({
selector: 'app-component',
template: '<tree-root [nodes]="nodes" [options]="options"></tree-root>',
templateUrl: './app.component.html'
})
export class App2Component {
nodes = [
{
id: 1,
name: 'root1',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
children: [
{ id: 7, name: 'subsub' }
]
}
]
}
];
options = {};
}
and my component.html class
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<h2>Project 2 Demo</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Status
</div>
<div class="panel-body">
<h3>{{title}}</h3>
<tree-root [nodes]="[
{
id: 1,
name: 'root1',
children: [
{
id: 2,
name: 'child1'
}, {
id: 3,
name: 'child2'
}
]
}
]" [options]="options"></tree-root>
</div>
</div>
</div>
Angular Architecture:-
1) <body> tag contains - root/parent component as <app-root></app-root> ie
parent module which contains a .ts,.html,.css,.spec files.
2) All other modules are inserted/loads inside app.component.html template
either by passing selector of components or loading component with
<router-outlet></router-outlet> and data is passed to child components
through selector of child component(tree-root) and child component
receive that data from parent component through Input();
app.component.ts
#Component({
selector: 'app',
template: '<tree-root [nodes1]="nodes" [options1]="options"></tree-root>'
});
export class App {
nodes = [
{
id: 1,
name: 'root1',
children: [
{ id: 2, name: 'child1' },
{ id: 3, name: 'child2' }
]
},
{
id: 4,
name: 'root2',
children: [
{ id: 5, name: 'child2.1' },
{
id: 6,
name: 'child2.2',
children: [
{ id: 7, name: 'subsub' }
]
}
]
}
];
options = {};
}
tree-root.component.ts
#Component({
selector: 'tree-root', <--- selector
template: ''
});
export treeclassComponent implements OnInit{
#Input() nodes1: any <---- Recieve input from app.component.ts(parent) here
#Input() options1: any <----Recieve input here
constructor(){}
ngOnInit() {
console.log(nodes);
console.log(options);
}
I also recommend the Angular tutorial and the docs.
The JSON array describes the tree nodes and their children (see here).
The tree-component receives two input parameters (see #Input), which are provided by the node and options property.
The nodes array delivers the information about the tree's node and children of the tree.
The tree-component will iterate over the given input array and creates the tree as you see it.
Update:
To create a tree you need to create an array of objects in your *.component.ts, like following:
this.nodes = [
{
id: 1,
name: 'root1',
children: [
{
id: 2,
name: 'child1'
}, {
id: 3,
name: 'child2'
}
]
}
];
The sample above is from Angular2 Tree Nodes.
Update 2:
As I see you can simply use your previously posted html, because you declared the nodes array in your component:
<tree-root [nodes]="nodes" [options]="options"></tree-root>
Also you need to remove the template from your #Component definition, it should look like this:
#Component({
selector: 'app-component',
templateUrl: './app.component.html'
})
....
I'm writing an app to go into a website, which is intended to calculate simplex algorithms. At the moment I am attempting to create functionality whereby the user can enter the number of coefficients and constraints, name these whatever they wish, and have the app spawn the relevant number and type of UI elements relative to the user's input. Here's what appears to be the relevant portion of the code (app.component.ts):
import { Component } from '#angular/core';
[...]
export class UIComponent {
id: 1;
name: string;
value: number;
type: string;
}
//* Mock data */
const UICOMPONENTS: UIComponent[] = [
{ id: 1, name: 'coefficient1', value: 4, type: '1dslide' },
{ id: 2, name: 'constraint1', value: 2, type: '2dslide' },
{ id: 3, name: 'min_max', value: 0, type: 'switch' },
{ id: 4, name: 'profit', value: 100, type: 'num_output' }
];
[...]
export class AppComponent {
title = 'SimutronX';
uicomponents = UICOMPONENTS;
[...]
}
This produces an error on screen saying:
Failed to compile.
/root/simutronx/simutron-app/src/app/app.component.ts (18,49): ',' expected.
Which relates to this line:
{ id: 2, name: 'constraint1', value: 2, type: '2dslide' },
Specifically the digit 2 in 2dslide. The error message (it's extremely long so I won't reproduce it all) also includes:
./src/app/app.component.ts
Module parse failed: /root/simutronx/simutron-app/node_modules/#ngtools/webpack/src/index.js!/root/simutronx/simutron-app/src/app/app.component.ts Unexpected token (22:85)
You may need an appropriate loader to handle this file type.
| var UICOMPONENTS = [
| { id: 1, name: 'coefficient1', value: 4, type: '1dslide' },
| { id: 2, name: 'constraint1, value: 2, type: ', 2: dslide, ' },: { id: 3, name: 'min_max', value: 0, type: 'switch' }, },
| { id: 4, name: 'profit', value: 100, type: 'num_output' }
| ];
Which is particularly confusing since, as you can see, that's not how I wrote the code. What's going on here?
You have an error in UIComponent type :
export class UIComponent {
id: number; //HERE
name: string;
value: number;
type: string;
}
Here a plunker :http://plnkr.co/edit/e6GrylSWznwbYD9VpK2C