I currently developing angular2 application . I would like to know how to add html attributes to custom components.
For example lets assume i have custom dropdown component and am re-using in same page on many places. If i would like to develop some dropdowns as multiselect and some of them single select, Could you please tell me how to that. If I add mutiple on component template it is showing multiselect for all dropdowns. If I add to each component individually where am using, it is not understanding that "Multiple" attribute.
If i would like to develop some dropdowns as multiselect and some of
them single select, Could you please tell me how to that.
You should be using a boolean #Input decorator defined in your custom component (Question seems unclear and i am assuming that you didn't ask for an implementation logic of multi select and single select). Below gives an example of adding a multiselect check for your custom component and how parent should bind value to that attribute when rendering the custom component
In your custom component.ts class
#Input() multiple: boolean = false;
In your custom html class
<div *ngIf="!multiple">
// render your single select html
</div>
<div *ngIf="multiple">
//render your multiple select html
</div>
In the parent html while rendering the custom component (assumpe selector as the name of the component)
// for multi select
<selector [multiple]=true> </select>
// for single select
<selector [multipl]=false> </select>
If your struggling to make a generic component supporting both single and multi select check this open source component ng-select
If you have no idea on #Input and #Output decorators in angular2 check this article
Related
So have a a MainLauyout.vue file
In that file I have a Toolbar component and a content component like so
<!--MainLayout.Vue-->
<Toolbar />
<Content></Content>
Within Content component I have a search bar with #input
Within the Content component
I have a router-view that displays another vue.
Within that vue, I have a table with a search function defined.
I was wondering how its possible to put that function in the #input that is in the Toolbar component. From what I was able to search they say to use refs but I'm not sure how to get that to work with my layout structure. Can anyone let me know the best way to do this?
I am currently struggling with referencing existing DOM elements with VueJS.
I have an existing date input rendered from the applications twig template and a separate VueJS widget i integrated.
<input type="time" ref="date_time_1" min="09:00" max="18:00" value="13:30">
The date input field is NOT inside the components template, but within the VueJS application (having id="#app").
For data-binding i would like to use the ref attribute to connect the VueJS component with my date input field inside the components template (e.g. for initialization with values coming from the application):
mounted() {
componentsTimeValue: this.$refs["date_time_1"].value;
}
getting undefined here.
Is there a way to connect "existing" DOM elements (that are not created with vue), with vue components using the ref attribute at all?
Though not a good practise because #div container is handed over to vue for manipulation but still you can reference the dom that weren't created by vue but lie inside #app
For that you must reference properly, so if you are in some child component you use
mounted() {
componentsTimeValue: this.$root.$refs["date_time_1"].value;
}
I'm using aurelia compose inside my application like this:
<compose view-model="childViewModel" model="{myActivationParameters: ...}"></compose>
How can I access the parent view model inside the childViewModel html code?
In the end I want to be able to do this inside the childViewModel.html
<span> ${ ParentViewModel.myProperty } and ${ RootViewModel.myOtherProperty } </span>
I'm looking for knockoutJs $root and $parent equivalent in aurelia.
edit: I'm using aurelia composition instead of custom components. Not a duplicate.
In a compose element, you have access to the context of his parent. So, just do ${myProperty}. If you have properties with the same name in the 2 viewmodels, you can't access the parent property.
In a future release, you will need to add the attribute inherit-binding-context in your compose element (See https://github.com/aurelia/templating-resources/issues/222)
I have a Vue component for a generic dialog window. It has no model, and a handful of slots for the title, the center, and the buttons.
Now I want to populate this dialog with a form. Obviously the details of the model, and the content, are specific to the form contained in, as well as the general behavior (e.g. validation etc).
What is the preferred Vue approach to handle this requirement?
Since your dialog component is just a template with slots, it seems like it would be easiest to use both the generic dialog component and the form component in your template and then simply put the form component tag in the dialog component's center slot:
<template>
<my-generic-dialog>
<template slot="center">
<my-form></my-form>
</template>
</my-generic-dialog>
</template>
As Bert Evans mentioned in his comment, if you were looking for a way to separate out general functionality of a vue component, you could either use Vue.extend(), or Vue mixins.
I am trying to create fully reusable component using Vue.js 2 and single file components, and right now my approach seems to be impossible to realize.
The goal is to create component for creating forms for a complex, nested JSON structure. This structure is supposed to be edited and then sent to the server. The component itself displays a header and submit button but the fields along with their placing is entirely the responsibility of the user of my component. (front-end engineer)
The MyForm component (implementation is not relevant here) is passed the JSON data and url to post them to.
The form is supposed to be reusable by many other users and the contents of the form itself is supposed to be not relevant. It may have a mix of html/inputs/custom components as children.
Let's imagine a simple scenario without data nesting with the following data:
var mymodel={ name : "My name", surname : "My surname" }
And a form i would like to create using my component:
<MyForm :model="mymodel" :url="http://localhost/post">
<div>
<MyTextInput v-model="model.name" label="Name"/>
<MyPanel>
<MyTextInput v-model="model.surname" label="Surname"/>
</MyPanel>
</div>
</MyForm>
Therefore:
MyForm gets passed a model to submit, stores it in data
MyTextInput is a custom component for displaying input with label
Second MyTextInput is the same component but created in another component contained called 'MyPanel' since this field needs to be placed differently.
As we can see there are many problems with passing variables and composition itself:
Composition:
If i put a <slot></slot> in the tempplate of MyForm for displaying the fields it would be compiled in parent scope, therefore all children (including MyTextField) would not have access to the "model"
If i try to use <MyForm inline-template> i cannot automatically display the form header and footer since all content is being replaced. Additionally when using single file components the compiler will look for all components inside the inline-template which means that i would have to import MyTextInput and MyPanel into MyForm which is not practical. I do not know in advance all components that will never end up in my form!
Passing variables:
If i use the variables directly from "model" (in first TextInput) i receive warning that i am modifying a variable from parent and it will be overwritten on next render (but in this case it will not be overwritten since i am INTENTIONALLY modifying the parent)
I cannot pass the model into second MyTextInput without passing it to MyPanel first. Actually i would have to pass it into EVERY custom component in between. And i do not know in advance how many custom components will there be. Which means that i would have to modify the code of every component that would ever be put into MyForm and require users to pass the data for each custom component they include.
If i would try to properly inform the parent about changes i would need to add v-on: event to every textinput and every custom component in between in order for the event to reach MyForm.
As i have said the component was supposed to be simple and easilly reusable. Requiring users of this component to modify code of every child they put into it and requiring them to add v-on: to every component inside does not seem practical.
Is my idea solvable using Vue.js 2.0 ? I have designed the same component before for AngularJS (1.5) and it was working fine and did not require to add modifications to each child of the form.
I've been using a ui framework based on vue 2.0 and you may get some ideas from its implementation. Based on its implementaion and my little experience with it, I think it's the person who uses your framework's responsibility to assemble the form-model. Also, for a form, we can always easily get all the data to be sent by using fields' value props without v-model's help.
The framework's doc on form element may also be helpful but it's currently only available in Chinese except for the code samples.
I suggest you to use Form Input Components using Custom Events to pass variables in your form.
Mutating a prop locally is now considered an anti-pattern, e.g.
declaring a prop a and then set this.a = someOtherValue in the
component. Due to the new rendering mechanism, whenever the parent
component re-renders, the child component's local changes will be
overwritten. In general, in 2.0 you should treat props as immutable.
Most use cases of mutating a prop can be replaced by either a data
property or a computed property.