I'm trying to put together a library of custom AngularJS directives that show the live functioning component and underneath it the code snippet used to make that component. I want the example and snippet to be generated from one shared html pattern.
I tried building a directive that copies the content of the div from the example as a string, but by the time that directive runs the component directives have already digested and made alterations to the DOM, making it a bad representation of how to build that component.
I don't want to use a codepen type solution, since I want everything to be under my server and my control, but I'm drawing a blank on how to show example snippets pre-AngularJS alteration. There's no need to be able to have a live code editor, just something to copy snippets out of.
Related
i am creating a e-commerce website using html/css. what i am trying to achieve is that i need same template for all product pages after clicking on the product. And i want to do this without actually coding every page using html and css. is there anyway to do this?
i tried to code all pages but that will be impossible to finsh if i keep on doing it, i want an effective way of doing this.
You can use plain JS to achieve the same or can use JS libraries like React JS, Angular JS, etc. for versatility. But all of these would require a good knowledge of coding.
And, to skip coding, I'll suggest you use WordPress + WooCommerce, all the required features are free and you don't have to code a single line, it's all GUI.
You need to add Javascript for this. The easy thing will be to work with a Javascript library called React.
In react you will make a component called a product card! and now you can pass your data to the product card by mapping the product list. You don't need to write product data showing HTML CSS for every product. Just write it one time and use it as many times as you want with React.
Here is the official React documentation
The site now I am developing has a collapsable source code view panel.
And I have no idea how to implement a React component to do the exactly the same thing and I am really sorry that I can only afford an example what I want.
There is a code view panel on this site and I want exactly same panel like the one on this site.
https://ftmscan.com/address/0xce761d788df608bd21bdd59d6f4b54b2e27f25bb#contracts
On the solidity source code view panel there is a collapse function and I am not sure how to implement this function.
Is there any module that can parse solidity code or do I have to make a new logic to parse code?
To summarize my questions;
Make a React Component that can view source code.
How to add collapse function to that component?
Additionally, I am currently using material-ui 4.12.3 and React version is 17.0.2
It looks like they are using the Ace editor.
There are multiple React implementations of the Ace editor on npmjs. I recommend you look into one of those. (Then you'll also get expand/collapse in the code editor "for free".)
I've been working with Angular and Angular Material for a while. One thing that bewilders me is how much boiler plate code you need write to just create a simple dialog.
The dialog needs to be defined in a component, and adds to the entry declaration of the module if not used in the same file. The dialog itself needs to inject a MatDialogRef, so you can pass data out when it closes. You need to inject a MatDialog into the main component that opens the dialog. You need to call its open function to open the dialog and pass value explicitly to the component. You probably need to read a tutorial to start using it.
It works well but compared with other implementations, it just seems too complicated. For example, in PrimeNG, a component library for Angular, you can define a dialog like:
<p-dialog header="Title" [(visible)]="display">
Content
</p-dialog>
You have a single variable that controls the visibility of the dialog. Anyone knows a little Angular can start using it with no learning curve.
So my question is: why Angular material wants to implement this way? What kind of advantage does it have? Is it efficiency or it gives you more flexibility in implementing complex functionalities?
I started working with the vueJS2 relatively recently, now I'm studying the components and I had a question for the experts.
As far as I know, the VueJS processes the HTML using JavaScript, and it is because of this that the rest of the HTML code is not visible.
Please correct me if I'm wrong.
view in Chrome browser
view in IDE
view in Chrome Source Code
You can see there is no <button> tag in Chrome source code
How can I make it so that when I use the components, I want to display the HTML completely FULL, as an example here:
source code of my jQuery DataTable
Another question related to the topic. Does it matter that the components reduce the whole HTML to 'one line ' for a search in the browsers?
You can't see the HTML within the source code because the compilation takes place after the source code has already been generated.
What you can do however is right clicking your component and selecting Inspect within Chrome. This works because the elements tab shows a live representation of your code, so therefore it also shows the compiled component markup.
If you want further debugging tools you can check out the Vue devtools Chrome extension.
This does not work like jQuery for the reason that Vue takes a data-driven approach. Your data is in charge of what you markup is going to look like. jQuery usually enhances the HTML that is already there.
Background
I am trying to create a blog using Angular (5). I am using markdown and storing that data outside the application. It downloads the markdown, parses it into an html string, then binds to the innerHTML of a div.
I understand that I am working against the grain, but I would really like to be able to create an elegant solution here.
Problem
Having the ability to use custom components gives us the ability to do a bunch of stuff with our blog that we won't be able to do otherwise. Signup components, custom widgets, etc. We can do all this and still have the ability to store the content separately outside of the application.
Custom components are not detected from the innerHTML string. Which doesn't allow it. It seems like DynamicComponentLoader used to provide a solution for this, but not anymore.
Clarity
I am not trying to render only the html, or only a single component. I want to render the html and all components included.
I also don't care that it's bound to the innerHTML property, it just seemed to get me the furthest. I can/will use a resolver if that would help.
Example
https://stackblitz.com/edit/angular-wylp55
As you can see the hello component renders in the html, but not the component itself.
Any help would be appreciated.
So I finally figured this out and did a write up.
Here's the link to the updated stack blitz.
https://stackblitz.com/edit/angular-dynamic-html.
I also did a full write up on my company blog. https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html.