DEV Community: Abhishek Kumar Singh ⚡️

Make a Material table header fix

Abhishek Kumar Singh ⚡️ — Wed, 12 Aug 2020 09:30:12 +0000

If you see the below code, you'll find out that I've removed the data rows from the first table and header row from the second table. and then added a tableHeader and tableData ids to both table.

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id="tableHeader">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
</table>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" id="tableData">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Now, we'll get the width of each column from the second table and reflect them in the first to fix the header.

const headerTable = document.querySelector("#tableHeader")
const dataTable = document.querySelector("#tableData")

/**
 * Get width of each column named "dataWidths" and
 * Fix first and last column width by subtraction 24px
 * as left and right padding was styled into the first and last column of the table
 * */
const dataWidths = [...dataTable.children[1].children[0].children].map(cell => cell.offsetWidth)
dataWidths[0] = dataWidths[0] - 24
dataWidths[dataWidths.length - 1] = dataWidths[dataWidths.length - 1] - 24


const headerColumns = [...headerTable.children[0].children[0].children]
headerColumns.map(column => {
    column.style.width = dataWidths[count] + "px"
    count++
})

Angular and Django integration into one project

Abhishek Kumar Singh ⚡️ — Fri, 03 Apr 2020 09:14:51 +0000

For those times, when you ought to do things which you don't want to do.

Requirements: Django > 1.8, Angular 8, 9 or above. I've done this Angular 9.

Let's jump directly into a pool, I'm guessing, you already have a basic Django setup, which is:

- Vritualenv setup
- Django project
- Static files and template files setup

Start by installing angular cli into your local.

npm install -g @angular/cli

if you are on windows', please set the path of the ng command. Otherwise, you can use npm run ng <your ng command> for the rest of the article.

In Django, create a Landing view and URL pointing to that view. And render a template which you're going to use for Angular. Let's say angular_index.html which is residing into Django templates dir.
Now, from command-line, create a new angular project names frontend into a Django static directory. ng new frontend
Now your Angular appsbasic structure is done, for testing, runng build. This will compile your code and produce some files intodistdirectory which will be created into afrontend (your angular app)` directory.
Now go into angular_index.html and include these compiled files runtime-es2015.js, polyfills.js, styles-es2015.js, vendor-es2015.js, main-es2015.js into Django template js block.

{% gist https://gist.github.com/abheist/5f4b742030b06d47f09605c97d211d97 %}

And now you're almost done, just add
<body> <app-root></app-root> </body>
into angular_index.html and run your python server by

python manage.py runserver

Goto your defined URL for your angular app and you'll be seeing the app.
Up until now, everything is working fine, but the problem is every time you do some code change, you have run ng build to compile the angular code and then see the changes reflect in the browser.

So you might be thinking, why not use ng serve, yes ng serve is a great option. But the sad part is, it does not provide us with the compiled files. it saves those files in the memory. So we need to use watch option in ng build for development purpose.

Run ng build --watch into a terminal and it will hot reload your project with every file change. But now, your browser will not show anything. Because at watch state, ng build --watch produces different filenames without postfix of es2015. So you need to change those files names in the angular_index.html and include the following files.

{% gist https://gist.github.com/abheist/bd7fb5199b57d7d80af54166ecd8ad46 %}

For better configuration, you can get the environment from settings.py and with the help of if condition, you can set the files according to the environment.
Just in case, if you add support for IE, there will extra file which will generate. You need to add that file to render everything perfectly.

🙏 - Abhishek Kumar Singh

Set Corporate Proxy on NPM

Abhishek Kumar Singh ⚡️ — Mon, 23 Mar 2020 05:20:05 +0000

Please use the following code to set the proxy

npm config set proxy http://username:pass@server.com:port
npm config set https-proxy http://username:pass@server.com:port

Please replace username, password, proxyserver.com and port with your details, it will look something like this:

npm config set proxy http://abhi:hipass@abheist.com:8080
npm config set https-proxy http://abhi:hipass@abheist.com:8080

🙏