![]() It is defined in the following way with many properties omitted for brevity. This component is generic with respect to row data. To give a concrete example of the breakdown in inference we can look at the ag-grid-angular component from AG Grid. We will do this by tweaking how we define our component's generic types. In these situations we need to start applying new techniques to help improve the developer experience with generics in Angular. In our example above this means the error about providing IPerson to the selection event would just disappear. At this point you will stop getting template type errors because any matches any type. When Typescript cannot narrow the type specified in every code path you may see that the generic type is inferred as any. This happens because type inference in Typescript has to ensure it is accurate across every code path. However, if the component gets more complex, in its use of the generic type parameter, then you may start to see a breakdown / widening in type inference. In most cases when working with Generic components in Angular everything will work as expected. It certainly seems like it does from this example. You may now be wondering why we said that Angular doesn't support generic types fully. Now if we make a mistake in the configuration, and provide incompatible types to multiple generic properties, we will get a build error. That type then becomes EventEmitter and the compiler can validate that the types of rowData and onSelection are consistent. Using this information the compiler then applies the correct type to the onSelection Output. ![]() It then infers that the generic type TData should be set to ICar. Without Generics we have to specify the type of the row data as any because we want to re-use this grid component with different data sets.Įnter fullscreen mode Exit fullscreen modeĪt this point the Angular compiler knows that the property carData has the type ICar and this has been assigned to the Input rowData which has the type TData. Let's say we have a grid component that displays items and fires an event when users select a row. By making the grid component generic users can provide their own interface that represents their row data and have that interface used throughout the grid components' properties.īefore we dive into the technical details of generic components I think it's important that we understand why we want to have generic support for our components. For example, you might have a grid component to display rows of data. Through generics we are able to customise existing Interfaces to a specific use case. Typescript Generics are a very powerful feature. In this article we will explain how Angular does it, but also how you can help the Angular Compiler be more accurate in complex components. Use the setup instructions below or go through a 5-minute-quickstart guide.You may be familiar with writing Typescript Generics like Grid but how does this work for Angular components? We can't provide generic types to our template selectors so how does Angular support generic components? * The features marked with an asterisk are available in the enterprise version only.Ĭheck out developers documentation for a complete list of features or visit our official docs for tutorials and feature demos. Hierarchical Data Support & Tree View *.Here are some of the features that make AG Grid stand out: Column Interactions (resize, reorder, and pin columns).Here's how our grid looks like with multiple filters and grouping enabled:īesides the standard set of features you'd expect from any grid: It delivers outstanding performance, has no 3rd party dependencies and integrates smoothly with React as React Component. AG Grid is a fully-featured and highly customizable JavaScript data grid.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |