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?
Related
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".)
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.
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.
I'm trying to wrap the Bootstrap Modal dialog in an Angular 2 component/directive/...
Not having much luck though. I've had a look at https://github.com/shlomiassaf/angular2-modal but many of the APIs used there aren't available anymore in the latest release - 0.46.
I would like a service that opens/closes the dialog. In order to do so, I would need something to manipulate the DOM. Injecting a Renderer, ElementRef, etc. don't seem to suffice.
On additional caveat is that a Modal needs to insert a non-clickable backdrop so a simple component won't do since it can only influence the DOM locally.
Problem: How do I manage a bunch of modals in an Angular JS controller?
I was putting them at the bottom of my view and using http://angular-ui.github.io/bootstrap/#/modal
but I was ending up with large html templates (that work) but feel inefficient.
What I've tried:
$dialog from UI-Bootstrap (pain in the butt)
Modals stored in templates included via ng-include using UI-Bootstrap's modal
modals put at the bottom of my view within the controller << currently on and is working
This feels like I'm missing something. Any pointers?
EDIT:
I did A LOT of searching and found a script and then upgraded it a bit:
Your modals are external templates
Their also in the scope where you clicked the button
3 different kinds (Confirm, Message, Load a template)
https://github.com/clouddueling/angularjs-modals
Update
I've since made a repo covering this issue: http://clouddueling.github.io/angular-common/
As rGil stated, use a directive, your own and not UI-Bootstrap if it seems too convoluted. All your modals will be similar, more or less. You just have to have a template and 2-3 scope variables to populate the modal. You can then pass parameters to open and close the modal as well and offer further functionality. The more you include the bigger the directive will be.
A second option would be to create separate HTML partials with those modals, and then just use ngInclude to place them in your views. This would be a huge time saver if your modals are different, but are reused frequently on multiple pages. Down sides to this is that you still need to toggle it open and closed. The Angular way would be to write a directive to handle just the toggling if that is all you need. The easy way is to write a little jQuery and open the modal on click or whatever.
Honestly, what it all comes down to is your comfort level. Will jQuery destroy your code? No, but it is not the "Angular Way". With jQuery, I can write a modal toggle in 3-4 lines of code. Doing it the Angular Way is a directive and a dozen+ lines of code. But the Angular way has the benefit of writing a tag in the future and no more code is needed. If I have just one modal, I may do it in jQuery. If I have multiple modals, as in your case, I may invest the time to learn directives and come up with one that works how I want it to work.