Dynamic sizing of angular/Clarity Datagrid Column Widths using Jquery - How to?

Question

I am new to angular and have been researching Clarity as the UI component..First thing I was toying with was Clarity 'Datagrid'.

Here I wanted to make a generic component which can be configured with something like a 'columnModel' and 'data' both of which will come from backend. which will be used in angular component structural directives (*ngFor etc) to display the datagrid. Here is what I came up with ...

Definitions in app.component.ts

columnModel = [
{header:'Id',dataIndex:'id','width':50},
{header:'Name',dataIndex:'name','width':100},
]

data : [
          {id: 1, name: 'Name1',  age: 1, rem: 'aaassssssssssssss'} ,
          { id: 2, name: 'Name2', age: 1, rem: 'aaassssssssssssss'},
          { id: 3, name: 'Name3', age: 1, rem: 'aaassssssssssssss'},
]

So here is what I did.(for the lack of better understanding of Clarity n Angular perhaps)..I used jQuery....

On 'ngOnInit' of the host component , I used jquery to set 'width' of 'data-columns' and 'data-cells' within each result row..based on 'colModel' above.. It seems WORKING!!!!

jQuery Code:

ngOnInit() {

const jqModel = this.colModel;

$(document).ready(function() {


    $(".datagrid-column").each(function(indx) {

       $(this).attr("style",function(i,v){return "max-width:" + 
                 jqcolModel[indx].width +"px;width:" + 
                               jqcolModel[indx].width+"px;"});

    });


    $(".datagrid-row-master").each(function(indx) {

       $(this).children().each(function(indx) {
           $(this).attr("style",function(i,v){return "max-width:" + 
                  jqcolModel[indx].width +"px;width:" +                  
                                         jqcolModel[indx].width+"px"});
       });

  });
}  

My question to you experts is 'Is this a best practise ?' OR is there a better way to achieve this..

Thanks in advance for guding me.

Answer 1

I'm going to separate the answer into two parts. The first part is how I would start building a datagrid that was configurable as described in the question. The second part is purely my opinion on using jQuery with Angular and learning Angular in general.

Part 1

The clarity datagrid is declarative. That means you declare only the things you need for your use case. e.g - if you need a footer or a filter you add a footer or a filter as described in the documentation and the datagrid takes care of the rest.

In your particular case it seems you need the model for setting column widths so I would use the built in binding that angular provides by declaring a binding to the native style property for width like this:

<clr-dg-column [style.width.px]="indexLookup('id')">ID</clr-dg-column>

Notice the brackets around the style.width.px ... that tells Angular to bind to the value provided by the indexLookup function. The lookup function simply reduces the columnModel as provided above for a provided index value.

Here is a simple StackBlitz showing a poc for the description/code that you provided: https://stackblitz.com/edit/clarity-dark-theme-v013-zxh5ks

Part 2

IMO - you would help yourself more in the long run by focusing only on Angular. In my experience with AngularJS apps, jQuery was the cause of a poor developer experience. I think that still applies to apps built with Angular. There was a highly upvoted SO question about Thinking in AngularJS and I believe much of what the author wrote still applies to Angular even if the semantics of Angular and AngularJS are different.

There is a lot to grasp in the Modern Angular Framework. IMO, I would focus on small easily digestible parts and master them before trying to bring in other modules or libraries to solve an issue. For example, here are three areas you might focus on to expand knowledge of some basic things provided by Angular:

• Data Binding: what can I bind to in a component or HTMLElement? How does it work with @Inputs and @Outputs? What is the effect of binding to a dynamic value and what happens when the value changes?
• @Inputs and @Outputs: What are they? Why would you want to use them?
• Component Lifecycle: What are the lifecycle hooks provided? When are they called and why? What are some common use cases for tying into one of the lifecycle hooks?

I don't know if you have worked through the Angular tutorial but its got some of the answers in bite sized chunks that are easy to digest in one or two sessions.

When I first started applying my AngularJS knowledge to Angular, the docs seemed unapproachable at first. I found it worth my time to go back (often) to both the cheatsheet and the Fundamentals/Components & Templates and re-read the content as I worked more and more with the framework and needed to use more of the things it provides. When I first started working with Angular I did this several times a week as it helped me become productive.

Hopefully the POC stackblitz helps you understand your how your use case (dynamically setting column widths for a Clarity datagrid) can be accomplished without jQuery. Finally, I hope my experience learning from the Angular docs helps you figure out the best way for you to learn the framework.