Free Product Trial
/ Thu, Dec 7, 2017
/ Fri, Dec 1, 2017
/ Tue, Nov 21, 2017
/ Fri, Nov 17, 2017
/ Thu, Nov 16, 2017
/ Thu, Nov 16, 2017
I was the one who developed this app and the lessons that go with it. As I wrote it, I noted several key learnings. Over the next few weeks — beginning in this post — I am going to share a few of these insights.
The first key learning—the one I’ll be talking about today—is this: Create individual components for each control.
In the application, we are using various Ignite UI components: Data Chart, Grid and Zoombar, as shown here:
Initially, the AppComponent template looks like this:
As it turns out, putting all your controls in a single component is never a good idea. It brings complexity and difficulty while debugging. Also, it fetches data for all the controls in single component constructor, which delays application load time. Finally, if there is an error in loading data for any controls (like PriceChart, for example), any other controls (grid, VolumeChart, etc.) will not be rendered.
The best approach to solve this problem is to put each control in individual Angular Components.
One of the major building blocks of Angular is Components. The Components are the most basic building block of a UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per element in a template. Ideally, Component denotes one UI element on the View. Each Component has its own UI called Template, Styles and code behind. (You can learn more about Components in Angular Essentials, which is available free from Infragistics.)
Therefore, for our application, each chart and grid should be an individual component. To achieve this, I put each Ignite UI control in separate components and created a project structure as shown here:
As you notice, each control in the HTML is an individual component.
As you notice that, each UI element is now an individual component: one for PriceChart, one for VolumeChart, one for IndicatorChart, etc. Now the template of PriceChartComponent looks like this:
Since each component has its own life cycle, now I can fetch data required for PriceChartComponent in the ngOnInit() life cycle hook of PriceChartComponent as shown here:
Since, each component is fetching required data in its own lifecycle, application response time is less and debugging is easier. The other advantage is Components can communicate with each other — a capability of Angular.
After creating individual component for each Ignite UI controls, I declared them in the AppModule as shown in the listing below:
Putting each control in separate Components help in better debugging, adding more controls easily, and better load time of application.
Be sure to download the sample application and experiment with it yourself, and learn more by getting the free Angular Essentials book.
Dhananjay Kumar works as a Developer Evangelist for Infragistics. He is a eight-time Microsoft MVP. You can reach him on Twitter: @debug_mode.