We have DOM object to create dynamic html input and elements.
For eg: var child = document.createElement(input);
child.type="text";
child.id="inputId";
var parent = document.getElementByTagName('body');
parent.appendChild(child);
as usual we used to create element by dom object for HTML. But how to create material components using dom object in typescript.
is there options to create dynamic way like that above for material components
for eg: var child = document.createElement(mat-form-field);
This question am asking bcz we have planned to create custom module. so which can use it in any project in future.
For my question the answer is
https://material.angular.io/guide/creating-a-custom-form-field-control
With the help of custom form field control,I think, we can create dynamic angular material.
Let me try it and post regards about it further. Thanks
Related
I've searched thru Corvid docs and Stack, not finding anything.
Is there a way to appendChild() in Wix Corvid(Code)?
EDIT: Wix does not allow DOM access directly. I assumed that people answering this would know i was looking for an alternative to appencChild and knew this method could not be used as is in Wix.
so to clarify: is there a way to add a child to a parent element using Wix's APIs?
It depends what you are trying to achieve,
the only thing off the top of my head is adding more items to a repeater
which you can do by first getting the initial data from the repeater, adding another item to array and reassign the data property of the repeater
const initialData = $w('#repeater').data
const newItem = {
_id: 'newItem1', // Must have an _id property
content: 'some content'
}
const newData = [...initialData, newItem]
$w('#repeater').data = newData
https://www.wix.com/corvid/reference/$w.Repeater.html#data
In Corvid, you cannot use any function which accesses the DOM.
Coming from one of the developers of Corvid:
Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w. One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can't try to trick it by using parent, window, top, etc.
Javascript files can be added to your site's Public folder, but the same limitations apply - no access to the DOM.
Read more here: https://www.wix.com/corvid/forum/main/comment/5afd2dd4f89ea1001300319e
Lets say I am creating a bar chart using Recharts, how would i create a custom component for each of the following Recharts components:
XAxis, YAxis, Tooltip, Legend, CartesianGrid, Cell, and Bar
The reason for this s because i am planning to create a chart with a lot of props and wish to separate all the default props and customization in their own individual component for the list component above.
I have tried just putting the CartesianGrid in a react component and the grid will not show
Any ideas?
It seems that you want to wrap the existing Recharts provided components in a custom component for better organization of your code.
This is currently not supported directly by Recharts, as they check for the type of element that you are rendering and if it does not match one of the allowed types it does not get rendered.
For ex:
<LineChart>
<Line></Line>
</LineChart>
would display a line correctly,
But
function MyLine(props) {
return <Line></Line>
}
<LineChart>
<MyLine />
<LineChart>
would not render the line.
This is because, recharts figures out that the MyLine component is not allowed and hence would not be displayed.
This is a big problem as it does not allow us to reuse or compose components.
But there are some workarounds, one of them being calling your custom component as a function directly:
<LineChart>
{
MyLine({})
}
</LineChart>
It also seems like there are no plans to provide such an api in future. All such issues on their github are already closed, without providing a solution.
https://github.com/recharts/recharts/issues/412
https://github.com/recharts/recharts/issues/41
https://github.com/recharts/recharts/issues/1470
If you implement the onBeforeRender method the is no way to access the model values in order to format them temporarily
Ideally you would want to format the values just before rendering without changing the model values of course!
How to do it?
By checking this link: http://derickbailey.github.io/backbone.marionette/docs/backbone.marionette.html
You will find that serializeData is being used just before rendering the template
So by overriding it, like below you can format the object values any way you want before rendering
serializeData():any {
var obj = super.serializeData();
obj.totalEnergy = Math.round(obj.totalEnergy).toFixed(0)
return obj
}
Marionette Views also have templateHelpers for this purpose. templateHelpers can be used to provide any additional data to the view apart from model. Functions can be specified to format model's data to be rendered on the view. Check out the basic example for template helpers in Marionette view's docs - http://marionettejs.com/docs/marionette.view.html#basic-example
So, I have a complicated Marionette app with several composite views. I am attempting to add a dynamic BackGrid to the view, but can't seem to get it to add columns. I create the grid and add it to the view as per this post: Backgrid integration. However, it appears that I need to recreate the Backgrid every time I add a column. This is incredibly wasteful!
Any ideas on where to look for a solution?
I was looking for this exact thing as well.
I found that there was a insertColumn and removeColumn method available on the grid itself. The insertColumn function takes a column formatted in the usual way (the way all the examples are showing) -
{name:<name_here>, label:<label_here>, cell:<cell_type_here>}
Adding a column becomes as simple as -
var Model = Backbone.Model.extend({});
var Collection = Backbone.Collection.extend({ model: Model });
var column = {name:"test_name", label:"test_label", cell:"string"};
var myBackgridObject = new Backgrid.Grid({columns: {}, collection: new Collection([])});
myBackgridObject.insertColumn(column);
This link to the marionette docs might help you as well, it goes over manipulating the grid -
Backgrid ref - manipulating the grid
My EmberJS app is confusing me a lot at the moment. I have a collection view, that in turn defines an itemViewClass of a custom view I have defined in my code. Something like:
App.CarouselView = Ember.CollectionView.extend({
itemViewClass: App.SlideView.extend(),
});
And this CarouselView is rendered inside a template that has a dynamic segment backing it (I hope this makes sense?) . The controller for these dynamic segment is an array controller because the model for these dynamic segments is a collection :) (more confusion, please let me know)
App.SlidesController = Ember.ArrayController.extend();
By now all of you have figured that I am basically rendering a bunch of slides inside of a carousel. And these are dynamically backed in the collectionView by setting the property
contentBinding:'controller' // property set in CarouselView, controller corresponds to SlidesController
The confusion begins now. I want to add a slide to the existing set of slides. So I provide a button with an action : 'add' target='view'
In the SlidesView,
actions:{
add: function(){
var carouselView = this.get('childViews')[0];
// SlidesView has carouselView and another view as it's child, hence this.get('childViews')[0] is carouselView
var newCard = carouselView.createChildView(App.SlideView.extend());
carouselView.get('childViews').pushObject(newCard);
}
}
The above piece of code sucks and hurts me bad. I want to basically add a new SlideView to my CarouselView collection programmatically upon a button trigger. But apparently Ember recommends that childViews should not be manipulated directly and I ought to instead change the underlying content.
It states in my console.log that manipulating childViews is deprecated etc.
So essentially I need to add something to my content to my SlidesController content ? However, I don't want to add something to the content, this is just a soft add, that is providing the user with a slide so that he may choose to edit or add something if he wants to. He can always discard it. A hard add that will require me to persist the new slide to the DB will come once the user decides to save this information.