If I have a component that renders a dropdown, I need to provide data for it. Not really customizableĭata inputs need customization. By the way, the pull request I have submitted to PrimeNG was about adding the click event on this component, hope it will be accepted as soon as possible. The ‘p-AutoComplete’ component provided an (onFocus) output, which emitted the (focus) event of the original input element inside that component, but it did not provide an (onBlur) output! The client needed to show an info label whenever user focuses on the autocomplete input, which was easily done with the (onFocus) output, and, logically, the message would have been removed as soon as the user navigated away from the input, which was, on the contrary, impossible, because there was no event to bind a method to.Īnother great example is the GrowlMessage component, which provides an (onClose) output, to which I can bind a method to be invoked whenever the user closes a particular message, but it fails to provide such a basic event as a click! I can’t invoke a method when the user clicks on one of the messages, because there is no such event emitted from the component! (Which resulted in us making a dirty hack by catching the click event with jQuery, finding the respective message in the array of our messages and only then invoking the method on it). This particular issue is related to a previous version and is fixed by now, but there are lots of other similar missing API points. Take, for example, the AutoComplete component. The problem with PrimeNG here is that it consists of components, but fails to provide all (or at least basic) events to bind from your code to. This is how Angular components deliver data with events from inner scopes to the outer world. Yes, now we do manually emit an event from the nested component, for a method to bind to it in the parent one. Here is a small example (omitted imports and module declarations for the sake of brevity): Components usually have selectors and templates defined as its metadata, and whenever we use a component’s selectors inside another components template, we actually populate that custom HTML tag with the nested component’s template and logic. The Inputs are basically more simple, than Outputs, just being a one way binding to a variable from the parent scope, in which the component is nested.īut Outputs may be a little trickier. PrimeNG is in no way different and uses the same approach. We do know that components can be nested, and that they create separate “scopes” (as we would have used this word when talking about angular.js, the first version of the Angular framework), and can communicate with the outside world using Inputs and Outputs. If you are reading this article, I assume that you have knowledge of how Angular components work and interact. So, now let’s dive into the issues I have found in this library. It has been a real pleasure diving into it (I was very excited on commiting my first contribution), and it really boosts ones knowledge of how Angular components do really interact. First of all, it is well composed and pretty much understandable (though I’ll talk on some consistency issues later), it’s source code is clear and for the most part, well organized, and it can be used easily with Angular. I don’t want to sound too biased, so I want to start with mentioning some real advantages that this library has. I have used PrimeNG as the primary source for UI components in a recent project at work, and have also looked thoroughly inside it’s source code, even contributed a little (though my pull request still has not been accepted or rejected on their GitHub), so I have lots of stuff to share based on my (often negative) experience. Today I am going to elaborate on PrimeNG, a UI components library developed by PrimeTek Informatics. With the Angular community developing rapidly there are lots of new libraries and plugins for the popular Google-supported framework.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |