DEV Community: Chadwin Deysel

GPT-4 and the use case of NFTs?

Chadwin Deysel — Sun, 26 Mar 2023 17:56:46 +0000

Bear with me for a second, but I think I found a use case for NFTs… And it also happens to involve generative AI software such as GPT-4, DALL-E and Mid Journey.

The Rise of AI-Generated Software

Quick back story. I was browsing the web when a stumbled on a few images of Donald Trump, getting arrested and spending some time in jail playing basketball and working out.

Now while some of these images are comical and obviously AI-generated, it started to make the wheels in my head turn.

Generative AI, while it’s able to easily blow your mind today, still has a long way to go. And if the results are this good now, imagine what this software will be able to create GPT-10 or Mid Journey 12 is released.

It will become possible to determine the difference between what is real life and what has been generated by AI. And this is where bad actors will come in.

So how do NFTs fit into this?

Still Remember NFTs?

I don’t think there have ever been three letters that make me cringe as hard as N-F-T.

What started out to be a pretty cool concept, dissolved and become bastardised to feed into people’s fantasy of getting rich quick ‘n easy. From scams that ripped off Pokémon, to speculations of money laundering. The NFT bubble had it all.

What started out as “hey, let’s add a digital ID to content”, turned into a mania, that finally concluded with people basically writing off the concept.

But I, surprisingly, still have hope. Not much… But enough.

A Way to Use NFTs?

Now I’m not coming out as a Blockchain Evangelist and saying that it is a flawless technology that will bring the end to the banking system! It does do certain things really well.

One of those things is the verification of the authenticity of digital transactions and content.

Blockchain for dummies: it’s a write-once, read-only database that tracks things by chaining them into blocks.

NFTs for beginners: tokens that live on this blockchain, each with unique codes and metadata that cannot be replicated.

It doesn’t really make sense to me either, but the idea is simple. It’s a token that is unique, can’t be changed and it subsequently linked to a piece of content.

So how would this work within the context of digital content? Basically, a creator of content, let’s say the US Government, would publish all their content, linked to an NFT. This way we could verify whether the press release is real, or whether it’s a DeepFake that was generated by the KBG.

Other Considerations

While I’m very optimistic about generative AI, like all technologies there are lots of concerns. My biggest concern with generative AI content is that it will be used to deceive people into thinking that it is real.

After all, it takes one fake image to derail someone’s career and reputation.

This is why I believe that any content generated by AI, should have a type of watermark (digital signature) attached to it so that it can be detected to prevent people from using it with malice or copywriting it and profiting from it.

We are living in some incredibly interesting and exciting times that we’re sure to tell our grandchildren about (back in my day, we had to write code using documentation!).

I’m curious to hear your thoughts and hot takes on this topic.

Create a CRUD Application with Inline Table Editing in Angular 14 +

Chadwin Deysel — Thu, 01 Dec 2022 18:42:58 +0000

Introduction

In this post, I will show you how to create a CRUD application in Angular, that allows you to create, update and delete records from the table itself.

This project is suited for beginners.

You can find the repository for the project on my [GitHub] by clicking here.

Please note, this application will not be integrated with a database and is for demonstration purposes only. So let’s get started.

Initialize the project setup.

Firstly, we need to ensure that you have Nodejs, NPM and Angular installed. You can check this by opening a new terminal and running the following commands:

node -v

npm -v

ng version

If you haven’t yet installed any of these, I would recommend you check out this guide.

Now let’s create our application. In your terminal, run the following command.

ng new inline-table-editor

Then, navigate into your project and open up the file in your code editor of choice.

Now that the application has been created, we’ll need to install and set up the UI library which in this case is going to Bootstrap. Install NGXBootstrap:

ng add ngx-bootstrap

Next, we’ll need to add the Bootstrap & Bootstrap Icons CSS libraries into the application. To do so, navigate to the index.html page, and in the <head> section add the following code:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">

<!-- Bootstrap Icons CSS --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

With that, the project is ready to go.

Create the Users table.

Let’s get started by creating the user's table. First, we’ll need to define our data model. In the root of the src folder, create a new folder names models. And add a new file titled: “Users.ts”. In the Users file add the following code to define the Users interface:

export interface User {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
}

Next, we’ll seed some demo data into the table. To generate some demo data, you can checkout JSON Generator. Once you’ve opened the window, replace the code in the left tab with the following code and hit generate.

[
   '{{repeat(8)}}',
  {
    id: '{{objectId()}}',
    firstName: '{{firstName()}}',
    lastName: '{{surname()}}',
    email: '{{email()}}',
  }
]

This will generate 8 random objects that can then be copied to your clipboard. Then navigate back to our application and in app.component.ts file, create a new variable and paste your mock data.

user: User[] = [
    // paste your generated content here.
]

It’s worth pointing out that in real-life applications, the data would be stored in a database and retrieved once needed using an API.

Now with that completed, navigate to the app.component.html file and replace all the existing code with the following to create the table.

<div class="container">
    <table class="table">
        <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">First Name</th>
          <th scope="col">Last Name</th>
          <th scope="col">Email Address</th>
          <th>
            <button
              type="button"
              title="Add New User"
              class="btn btn-primary"
            >
              <i class="bi bi-plus"></i>
            </button>
          </th>
        </tr>
      </thead>

            <tbody>
        <ng-container *ngFor="let user of users; let i = index">
          <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.firstName }}</td>
            <td>{{ user.lastName }}</td>
            <td>{{ user.email }}</td>
            <td>
              <button
                class="btn btn-danger btn-sm mx-1"
                title="Delete User"
                type="button"
              >
                <i class="bi bi-trash"></i>
              </button>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>
</div>

Once completed, run the application and navigate to http://localhost:4200, view your table with the demo data inside of it.

ng serve

Updating an Existing User

To perform updates to the data, we’ll be making use of the Reactive Forms Module that’s built in angular. Firstly, add the ReactiveFormsModule to you application in the app.module.ts file.

imports: [
    // Existing Modules
    ReactiveFormsModule,
],

Next we’ll need to add a constructor to our app.component.ts file and inject the Form Builder, which is used to build our reactive forms.

constructor(
    private fb: FormBuilder
) { }

Now, we’ll create our form with the needed fields and validation requirements.

form = this.fb.group({
    firstName: ['', [Validators.required]],
    lastName: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email]]
 });

I’m planning on creating more content based on the Reactive Forms Module. Sign up to my newsletter for my latest updates.

With this application, you can update any user by just clicking on them. However, we want to make sure that the user is only able to make changes to once user at a time. To accomplish that, we’ll create a property, userSelected and a method called selectUser() to select a user to select the user that is too be updated.

userSelected: User = {} as User;

selectUser(user: User) {
        // check if userSelected is empty, before assigning a selected user
    if(Object.keys(this.userSelected).length === 0) {
      this.userSelected = user;

      this.form.patchValue({
        firstName: user.firstName,
        lastName: user.lastName,
        email: user.email
      })
    }
  }

Next, we’ll need to let the UI respond to us selecting a user. For this I want the background color of the row to change and replace the table data with inputs. To achieve this, replace the code in the <tbody> with the following.

<tbody>
  <ng-container *ngFor="let user of users; let i = index">
    <tr
            *ngIf="userSelected != user"
            (click)="selectUser(user)"
        >
      <td>{{ user.id }}</td>
      <td>{{ user.firstName }}</td>
      <td>{{ user.lastName }}</td>
      <td>{{ user.email }}</td>
      <td>
        <button
          class="btn btn-danger btn-sm mx-1"
          title="Delete User"
          type="button"
        >
          <i class="bi bi-trash"></i>
        </button>
      </td>
    </tr>

        <tr *ngIf="userSelected == user" class="table-primary">
      <td>{{ user.id }}</td>
      <td>
          <input
            type="text"
            class="form-control"
            formControlName="firstName"
            [value]="user.firstName"
            title="First Name"
            />
      </td>
      <td>
        <input
          type="text"
          class="form-control"
          formControlName="lastName"
          [value]="user.lastName"
          title="Last Name"
          />
      </td>
      <td>
        <input
          type="text"
          class="form-control"
          formControlName="email"
          [value]="user.email"
          title="Email Address"
          />
      </td>
      <td>             
        <button
            class="btn btn-primary btn-sm mx-1"
            title="update"
            type="submit"
            [disabled]="form.invalid"
          >
            <i class="bi bi-lightning"></i>
          </button>

          <button
            class="btn btn-danger btn-sm mx-1"
            title="Cancel Changes"
            type="button"
          >
            <i class="bi bi-x-lg"></i>
          </button>
        </td>
    </tr>
  </ng-container>
</tbody>

To summarize this code, it checks if the user selected is the user that is in the row of the table. If so, we change the background color of the row and add in the form inputs needed. It’s important to note that this code the form above will not work. To do that, we’ll need to wrap our table in a <form> tag.

<form [formGroup]="form" (ngSubmit)="update()">
    <table class="table">

    </table>
</form>

Now let’s create the update() to update the user.

update() {
      // gets the index of the user we need to update
    let index = this.users.map(u => u.id).indexOf(this.userSelected.id);

        // updates the user at the index selected
    this.users[index] = {
      id: this.userSelected.id,
      firstName: this.form.value.firstName!,
      lastName: this.form.value.lastName!,
      email: this.form.value.email!
    };

        // clean up
        this.userSelected = {} as User;
    this.form.reset();  
}

Finally, we’ll need the “Cancel Changes” button to undo the changes and reset the UI.

<!-- Cancel Changes Button in app.component.html -->
<button
  class="btn btn-danger btn-sm mx-1"
  title="Cancel Changes"
  type="button"
    (click)="cancel()"
>
    <i class="bi bi-x-lg"></i>
</button>

// app.component.ts
cancel() {
    // clears the user selected
    this.userSelected = {} as User;

    // resets the form
  this.form.reset();
}

Create a new User

To create a new user, we’ll use a lot of the same methods and functionality that we’ve already built in. Let’s start by adding the isEditing property. This property will distinguish between if we’re currently editing an existing user or adding a new one. Add the isEditing variable to the top of the app.component.ts.

isEditing: boolean = false

Next, let’s make changes to our existing code to update the functionality. Replace the existing methods in the app.component.ts with the code below.

selectUser(user: User) {
  if(Object.keys(this.userSelected).length === 0) {
    this.userSelected = user;
    this.isEditing = true

    this.form.patchValue({
      firstName: user.firstName,
      lastName: user.lastName,
      email: user.email
    })
  }
}

update() {
  if(!this.isEditing) {
    this.users[0] = {
      id: this.generateId(),
      firstName: this.form.value.firstName!,
      lastName: this.form.value.lastName!,
      email: this.form.value.email!
    }
  }   
  else {
    let index = this.users.map(u => u.id).indexOf(this.userSelected.id);

    this.users[index] = {
      id: this.userSelected.id,
      firstName: this.form.value.firstName!,
      lastName: this.form.value.lastName!,
      email: this.form.value.email!
    };
  }

  // clean up
  this.userSelected = {} as User;
  this.isEditing = false 
  this.form.reset();   
}

cancel() {
  if(!this.isEditing && confirm('All unsaved changes will be removed. Are you sure you want to cancel?')) {
        // removes the user that was added
    this.users.splice(0, 1);
  }

  this.userSelected = {} as User;
  this.isEditing = false
  this.form.reset();
}

We’ll also need to add another method to generate an ID for the user. In a real world scenario, this would be generated by the backend or database.

// Generates a random string of characters.
generateId() {
  return (Math.random() + 1).toString(36).substring(4) + (Math.random() + 1).toString(36).substring(4) 
}

Finally, let’s create the addUser() to set add our new user to the frontend.

<!-- Add New User button, app.component.html -->
<button
  type="button"
  title="Add New"
  class="btn btn-primary"
  (click)="addUser()"
>
  <i class="bi bi-plus"></i>
</button>

// app.component.ts
addUser() {
  this.users.unshift({
    id: '-',
    firstName: '',
    lastName: '',
    email: ''
  })
  this.userSelected = this.users[0];
}

Deleting a User

To finalize all the CRUD functionality, we’ll need to create a way to delete a user.

<!-- Delete User button, app.component.html -->
<button
  class="btn btn-danger btn-sm mx-1"
  title="delete"
  type="button"
  (click)="deleteUser(i)"
>
  <i class="bi bi-trash"></i>
</button>

// app.component.ts
deleteUser(index: number) {
  if(confirm('Are you sure you want to delete this user?')) {
    this.users.splice(index, 1);
  }
}

Conclusion

I hope you found this post useful.

Be sure to check me out on Twitter for more Angular and development tips. Thanks for reading and have a great day! 😄

How to Build a CRUD Application in Angular 14 +

Chadwin Deysel — Tue, 29 Nov 2022 16:32:30 +0000

Introduction

Hi there! In this tutorial, I will be going over how you can create a CRUD application in Angular, that utilizes forms in dialogue boxes.

This tutorial is suitable for those that are new to Angular.

Please note, this tutorial will not be integrated with any database. So, changes made to the data will be temporary.

Project Setup

Firstly, we must ensure that you have Nodejs, NPM and Angular installed. You can check this by opening a new terminal and running the following commands:

node -v

npm -v

ng version

If you haven’t yet installed any of these, I would recommend you check out this guide.

Now let’s create our application. In your terminal, run the following command.

ng new inline-table-editor

Then, navigate into your project and open up the file in your code editor of choice.

Now that the application has been created, we’ll need to install and set up the UI library which in this case is going to Bootstrap. Install NGXBootstrap:

ng add ngx-bootstrap

Next, we’ll need to add the Bootstrap & Bootstrap Icons CSS libraries into the application. To do so, navigate to the index.html page, and in the <head> section add the following code:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">

<!-- Bootstrap Icons CSS --> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

With that, the project is ready to go.

Create the Users Table

Let’s get started by creating the user’s table. First, we’ll need to define our data model. Under the app folder, create a new folder called data and then another called users. This is where our seed data and model will live.

Then create a file titled Users.ts and add the following code to define the user:

// src > app > data > users 
export interface User {
    id: number;
    name: string;
    email: string;
    description: string;
    company: string;
}

Next, we’ll seed some demo data into the table. We can use JSON Generator, to generate the seed data for us. Navigate to the page and replace the code in the left tab with the following code and hit generate.

[
  '{{repeat(8)}}',
  {
    id: '{{index()}}',  
    name: '{{firstName()}} {{surname()}}',
    email: '{{email()}}',
    description: '{{lorem()}}',
    company: '{{company()}}'
  }
]

This will generate 8 random objects that can then be pasted into our application. Create another file under the users folder names UsersSeedData.ts, and add the following code:

// src > app > data > users 
export const UsersSeedData: User[] = [
    // paste your generated content here
]

It’s worth pointing out that in real-life applications, the data would be stored in a database and retrieved once need using an API.

Now with that completed, navigate to the app.component.ts file, and make the following changes:

import { User } from 'src/app/data/users/Users';
import { UsersSeedData } from 'src/app/data/users/UsersSeedData

...

// add implements OnInit
export class AppComponent implements OnInit { 
    users: User[] = []

    constructor() {}

    ngOnInit(): void {
        // add the seed data here 
    this.users = UsersSeedData;
  }
}

Next, navigate to the template (app.component.html), and make replace the existing content with the following:

<div class="container">
  <h2>Users</h2>

  <hr>

  <table class="table">
    <thead>
      <tr>
        <th>...</th>
        <th>Name</th>
        <th>Email</th>
        <th>Company</th>
        <th>
          <button 
            class="btn btn-primary mx-1" 
            title="Add New User"
            >
            <i class="bi bi-plus"></i>
          </button>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr *ngFor="let user of users; let i = index">
        <td>{{ i + 1 }}.</td>

        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.company }}</td>

        <td>  
          <div>
            <button 
              class="btn btn-primary mx-1" 
              title="Edit User"
              >
              <i class="bi bi-pencil"></i>
            </button>

            <button 
              class="btn btn-danger mx-1" 
              title="Delete User"
              >
              <i class="bi bi-trash"></i>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Once completed, run the application and navigate to http://localhost:4200, view your table with the demo data inside of it.

ng serve

Creating a New User

As the description of this post mentioned, we’ll be adding our forms to our application using a dialogue box (modal). Let’s start by importing the module that is going to run the modal UI for us. In the app.module.ts file, add make the following changes:

import { ModalModule } from 'ngx-bootstrap/modal';

...

@NgModule({ 
    ...
    imports: [
    // Existing Modules
    ModalModule,
    ],
    ... 
})

Next, navigate back to the app.component.ts and add the following:

modalRef?: BsModalRef;

constructor(
    private modalService: BsModalService
) { }

openModal(template: TemplateRef<any>) {    
  this.modalRef = this.modalService.show(template);
}

We injected the modal service, that is provided by the modal module we imported, and created a method to open the modal. Now in the template, add the following to the bottom of the file:

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">
      Add New User
    </h4>

    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
      <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form action="#">
      <input 
        type="text"
        title="Full Name"
        placeholder="Full Name"
        class="form-control my-2"
        >

      <input 
        type="text"
        title="Email"
        placeholder="Email"
        class="form-control my-2"
        >

      <input 
        type="text"
        title="Company"
        placeholder="Company"
        class="form-control my-2"
        >

      <textarea
        title="description"
        class="form-control my-2"
        placeholder="Description"
      >

      </textarea>

      <button
        [title]="Add New User"
        class="btn btn-primary"
        type="submit"
      >
        Add New User
      </button>
    </form>
  </div>
</ng-template>

Once that has been added, update the “Add New User”, button with the openModal().

<button 
  class="btn btn-primary mx-1" 
  title="Add New User"
  (click)="openModal(template)"
  >
  <i class="bi bi-plus"></i>
</button>

You can now see that when you click on the “Add New User” button, the modal will pop up with the form inside of it. However, the form does not have any functionality yet. To do that, we’ll be making use of Reactive Forms which comes built-in with Angular. First import the Reactive Forms Module in the app.module.ts file:

import { ReactiveFormsModule } from '@angular/forms';

...

@NgModule({ 
    ...
    imports: [
    // Existing Modules
    ReactiveFormsModule
    ],
    ... 
})

Next, we’ll inject the form builder and build our new form. Navigate to the app.component.ts file, and make the following changes:

... 

form = this.fb.group({ 
    name: new FormControl<string>('', [Validators.required]),
    email: new FormControl<string>('', [Validators.required, Validators.email]),
    description: new FormControl<string>(''),
    company: new FormControl<string>('', [Validators.required])
})

...

constructor(
  private modalService: BsModalService,
  private fb: FormBuilder,
) { }

One thing to note: In Angular 14, a new feature was added called TypedForms. This adds type safety to be added to your forms as well as allows Intellisense, to be used on your form. Now we need to make the necessary changes to our form, to add functionality. In the app.component.html file, replace the contents of the modal with the following:

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">
      Add New User
    </h4>

    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
      <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form
            [formGroup]="form"
      (ngSubmit)="addUser()"
        >
      <input 
        type="text"
        title="Full Name"
        placeholder="Full Name"
        class="form-control my-2"
                formControlName="name"
        >

      <input 
        type="text"
        title="Email"
        placeholder="Email"
        class="form-control my-2"
                formControlName="email"
        >

      <input 
        type="text"
        title="Company"
        placeholder="Company"
        class="form-control my-2"
                formControlName="company"
        >

      <textarea
        title="description"
        class="form-control my-2"
        placeholder="Description"
                formControlName="description"
      >

      </textarea>

      <button
        [title]="Add New User"
        class="btn btn-primary"
        type="submit"
                [disabled]="form.invalid"
      >
        Add New User
      </button>
    </form>
  </div>
</ng-template>

Finally, let’s create the add addUser(), method to add a new user.

addUser() {
if (this.form.valid) {
  const user: User = { 
    id: this.users.length,
    name: this.form.value.name,
    email: this.form.value.email,
    description: this.form.value.description,
    company: this.form.value.company
  } as User;

  this.users.push(user);

  this.modalRef?.hide();
}

Now we can successfully add a new user!

Updating an Existing User

To update an existing user, we’re going to make use of the existing functionality used to add a new user. Let’s start by making a modification to the openModal() to pass a user in if there is an existing user. In the app.component.ts file, make the following changes:

openModal(template: TemplateRef<any>, user?: User) {    
  if(user != null) {
        // updates form values if there is a user 
    this.form.patchValue({
      name: user.name,
      email: user.email,
      description: user.description,
      company: user.company
    })
  } else {
        // clears the form if there is no user
    this.form.reset();
  }
  this.modalRef = this.modalService.show(template);
}

Now, we need to make changes to the template. Make the following changes to the “Add New User” button and “Edit User” button, respectively:

...

<button 
    class="btn btn-primary mx-1" 
    title="Add New User"
    (click)="openModal(template, undefined)"
    >
        <i class="bi bi-plus"></i>
</button>

...

<button 
  class="btn btn-primary mx-1" 
  title="Edit User"
  (click)="openModal(template, user)"
  >
  <i class="bi bi-pencil"></i>
</button>

As you can see, in the “Edit User” button, we pass in the user that is being displayed in the table column. However, for the “Add New User” button, we pass in an undefined user that would act as a null user.

We now need to make changes to handle the update functionality, but before we do that, we first need to create a way to detect if we’re updating an existing user or if we’re adding a new user. To do this, we’re going to add another control to the form:

form = this.fb.group({ 
    id: new FormControl<number | null>(null),
    name: new FormControl<string>('', [Validators.required]),
    email: new FormControl<string>('', [Validators.required, Validators.email]),
    description: new FormControl<string>(''),
    company: new FormControl<string>('', [Validators.required])
})

As you can see, we added a nullable form control that corresponds to the ID. Now we need to make our final changes to our openModel(), to add our ID into the form when we pass a user into the method.

openModal(template: TemplateRef<any>, user?: User) {    
    if(user != null) {
      this.form.patchValue({
                // add the users id
        id: user!.id,
        name: user.name,
        email: user.email,
        description: user.description,
        company: user.company
      })
    } else {
      this.form.reset();
    }
    this.modalRef = this.modalService.show(template);
  }

Now we need to update the addUser(), by changing it to updateUsers(), and making changes to the method:

// change addUser() to updateUsers()
updateUsers() {
    if(this.form.value.id != null) {
      if (this.form.valid) {
                // get the index of a user
        const index: number = this.users.findIndex((user: User) => user.id === this.form.value.id);

        if (index !== -1) {
          this.users[index] = {
            id: this.form.value.id,
            name: this.form.value.name,
            email: this.form.value.email,
            description: this.form.value.description,
            company: this.form.value.company
          } as User;
        }

        this.modalRef?.hide();
      }
    }
    else {
      if (this.form.valid) {
        const user: User = { 
          id: this.users.length,
          name: this.form.value.name,
          email: this.form.value.email,
          description: this.form.value.description,
          company: this.form.value.company
        } as User;

        this.users.push(user);

        this.modalRef?.hide();
      }
    }
}

We also need to update our template to use the correct method as well as to indicate that we’re editing a user. in the app.component.html file, replace the modal with the following:

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">
      {{ form.value.id != null ? 'Edit User' : 'Add New User' }}
    </h4>

    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
      <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form
      [formGroup]="form"
      (ngSubmit)="updateUser()"
    >
      <input 
        type="text"
        title="Full Name"
        placeholder="Full Name"
        class="form-control my-2"
        formControlName="name"
        >

      <input 
        type="text"
        title="Email"
        placeholder="Email"
        class="form-control my-2"
        formControlName="email"
        >

      <input 
        type="text"
        title="Company"
        placeholder="Company"
        class="form-control my-2"
        formControlName="company"
        >

      <textarea
        title="description"
        class="form-control my-2"
        placeholder="Description"
        formControlName="description"
      >

      </textarea>

      <button
        [title]="form.value.id != null ? 'Edit User' : 'Add New User'"
        class="btn btn-primary"
        type="submit"
        [disabled]="form.invalid"
      >
        {{ form.value.id != null ? 'Edit User' : 'Add New User' }}
      </button>
    </form>
  </div>
</ng-template>

Now we can successfully update an existing user!

Delete a User

The final part of all of this is to delete a user. Let’s start by updating the “Delete User” button:

<button 
  class="btn btn-danger mx-1" 
  title="Delete User"
  (click)="deleteUser(i)"
  >
  <i class="bi bi-trash"></i>
</button>

As you can see, we pass in the user’s index to the deleteUser(). Finally let’s add the deleteUser(), in the app.component.ts file.

deleteUser(index: number) {
  if(confirm("Are you sure you want to delete this user?")) { 
    const user: User = this.users[index];

    if(user != null) {
      this.users.splice(index, 1);
    }
    else {
      alert("User not found");
    }
  }
}

And with that we can now delete a user and the CRUD functionality is complete.

Conclusion

As always, I hope you found this post useful!

Be sure to check me out on Twitter for more Angular and development tips. Thanks for reading and have a great day! 😄

The Most Underrated Frontend Framework - PrimeFaces

Chadwin Deysel — Mon, 09 May 2022 11:32:26 +0000

There are a lot of popular frontend frameworks for JavaScript developers out there. Material UI and Bootstrap immediately comes to mind. However, I think there’s one to rule them all. The most underrated frontend framework - PrimeFaces.

I will be going over what PrimeFaces is and why you should be using it in your next project.

What is PrimeFaces?

PrimeFaces is a frontend framework that is available on popular libraries such as React, Angular and Vue.js.

Unlike most component libraries, it isn’t just made of a handful of pre built components made with a design system. It’s made of an eco system of component, icons, a powerful CSS libraries that supports multiple design systems.

Second to None Component Library

PrimeFaces has one of the biggest (if not the biggest) open source component libraries with 80+ components.

It’s comes with everything you’d expect such as form elements, buttons, drag and drop stuff, cards, tables etc.

But it also comes with a suite of other uncommon but very useful components such as interactive calendar views, skeleton loaders, map integrations and built in charts with Chart.js.

The existing components are also some of the best I’ve used in terms of their capabilities and ease of use, such as their data table.

Design System

PrimeFaces also has their own design system called PrimeOne, with everything you’d expect from a design system (text formatting, colors etc.) and great tooling such as Figma and Sketch templates to get you designing.

Here’s the best part though... PrimeFaces is also compatible with other popular design system. Google’s Material, Microsoft’s Fluent Design and even Tailwind!

These are configured as Themes and can be swapped out with a simple reference to a CSS file.

There are multiple themes available that support different looks, colors and are compatible with light and dark modes. Paid for premium themes are also available to give your organization an additional edge.

If you don’t find the look and feel you need, they’ve also built a theme builder so that you can design a custom library that works for you and your company.

Utility CSS and Icon Libraries

PrimeFaces also comes with great options for a utility CSS library and Icon library.

PrimeFlex, their utility CSS library, allows you to style your elements and components by configuring CSS properties with class names. It can be operated with the component library or by itself.

The icon library Prime provides also passes with flying colors as it has all the icons you would need. However it’s not as extensive as something like Font Awesome.

PrimeBlocks!

Another cool part of the PrimeFaces eco system is the PrimeBlocks library. This is essentially prebuilt example pages that were built on PrimeFaces components and PrimeFlex to be used in your application immediately.

There are example files for everything from E-Commerce, Landing Pages, Blogs, Web Application forms and even Dashboards.

The majority of them are behind a paywall, but the pricing is reasonable and the licensing is really flexible allowing you to buy once and use them across as many projects for your organization.

Checkout PrimeBlocks Licensing Agreement here

Useful Links to Get Started

PrimeFaces

PrimeFlex

Checkout PrimeFlex here!

PrimeBlocks

Conclusion

If you found this post useful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.

Thanks for reading and have a great day! 😄

Why LinkedIn Sucks and How Should We Be Using It?

Chadwin Deysel — Fri, 06 May 2022 07:15:23 +0000

I've recently read a post by @shareef on why he doesn't use LinkedIn and it highlighted a lot of pain points I myself have experienced on LinkedIn as well.

And while people agreed with Shreef, there's also a lot of people who have had success with the platform. So it got me thinking, what is the best way to use LinkedIn?

The Promise 🌅

Oh LinkedIn. The promise of a platform for aspiring professionals to progress their careers by getting exposed to new career opportunities and build a network of like minded professionals.

Reality 💀

In recent times my experience with LinkedIn has been terrible to say the least. Some reasons include:

Constant posts about showing off success such as "I just bought a car" or "check out my latest certification" to gain some cheap validation... I mean to motivate others to push through on their journey on not give up.💪
Irrelevant jobs postings getting spammed in my inbox like "Hi Chadwin. We're looking for a Senior React Developer with 8 - 10 years experience" despite me just starting out.
Engagement bait through quotes, memes and asking people to react on a post if, for example, leave a like if you're feel motivated today.
And promoted posts of Career Coaches trying to get us past the resume phase for the low price of being added to their mailing list.

It's clear to see that there's not that much value on LinkedIn these days. And I'm sure that I'm not the only person that has been experiencing this.

The other side 💸

Now that I've got all that negativity out of my system, I've also seen and heard of people who have been getting immense success out of LinkedIn. Whether it be finding clients, building a solid network of like minded people etc.

So I'm keen to hear from you. What is the best way to use LinkedIn? And is it even worth it in 2022?

Best JavaScript UI Component Libraries to use in 2022

Chadwin Deysel — Mon, 02 May 2022 13:37:17 +0000

UI Component Libraries are the best ways to add a good look and functionality into your application. In this post I will be showing off some of the best open source UI Libraries for React, Vue.js and Angular to use in 2022 and beyond! 🚀

1. Bootstrap

Bootstrap is one of the oldest, well maintained and popular component libraries and design system out there. It was created at Twitter in mid 2010 and since has gain a massive following over the years.

2. Material Design

Material Design is a design language that was created by Google in 2014, for the development of Android UI and Android Apps. It has since influenced the design of the web and has become one of the most popular options for frontend development.

3. PrimeFaces

PrimeFaces is an open source UI (user interface) library created by the company Prime PrimeTek Informatics. It has turned into a uniform eco-system for web developers and is also the Author’s Choice!

4. Tailwind CSS & Headless UI

Tailwind CSS, is a utility-first CSS framework at it’s core. What this means is instead of relying on prebuilt components to create your application, you style your application with CSS classes that link to CSS styles. Headless UI is an extension on Tailwind to provide you with basic UI components to style your application.

5. Ant Design

Ant design is a product design system to create enterprise level digital products. It was created by Alibaba for React, but has since been applied to the other popular JavaScript Frameworks as well.

Thank you for reading and I hope you found this post insightful!

Be sure to check me out on Twitter for more frontend development tips. Thanks for reading and have a great day! 😄

How Angular Works, and Why You Should Be Using It.

Chadwin Deysel — Wed, 27 Apr 2022 18:31:18 +0000

Angular. The JavaScript framework that strikes fear into the heart in many aspiring frontend developers. With a complex structure and steeper learning curve, it can be intimidating to get started. However, once you clear all of this, you're invited to a world of endless possibilities.

In this post, I will be going over how Angular works and go over some of my favorite features to, hopefully, entice you over to the dark side.

What is Angular

Angular is a Frontend JavaScript framework for frontend web development that is maintained by Google...

Sounds great! But what does that mean though? Well before we carry on with that, we need to understand the difference between a JavaScript libraries and frameworks as you’ll probably hear this a lot.

When thinking about the a framework vs a library, the best way to think about it is that a library is like pieces of individual furniture while a framework is made up of sets of ready made rooms.

Frontend libraries gives you the basic tools that focus on a base concept while a framework gives you a lot more structure to play around with.

With that being said, Angular is a frontend web development tool that comes with additional built in features like a libraries for forms and routing.

How it Works

While there’s a lot to Angular (which I’m not going to be going in depth with) there are three fundamental concepts that you need to grasp:

Components: the building blocks of Angular applications
Services: the way we add functionality into our apps.
Modules: the way we organize our components and services in our Angular application.

I’ll explain all of these concepts in future details.

Components

Like most frontend tools, Angular is made of components. These components are then usually broken into three parts which regularly represents 3 files:

Component: the part that handles all the logic.
Template: HTML with Angular code to perform logic and embed data.
Styling Module: styling for the component handled with your styling library of choice.

Components are also able to communicate to each through different methods like Parent, Child, Sibling relationships or have data parsed through services form one component to another.

Another cool feature of Angular is built in RxJS, a library for event driven, asynchronous communication. This allows data to be passed through components in real time.

Services

Angular services are used to provide functionality to your components. From interacting with a REST API to implementing gauds for access control (only allow admin users to access certain parts of the application).

Services are injected into components by using a method called dependency injection. This is a technique in which an object receives other objects (such as a REST API service) that it depends on.

Coupled Services

Coupled services, basically means that the service is one with the component. While this is convenient, it could cause problems such as receptiveness as your component starts to scale. To solve this, we have decoupled services.

Decoupled Services

Decoupled services, means that the services are separate from the component. Now the service can be used in other components as well, without the need for repetition.

Other benefits of dependency injection includes:

Testability: With dependency injection, we can swap out the instance of the service in the component for a mock instance to be used in testing to makes sure everything works well.
Maintainability: It becomes easier to keep your application’s state constant. If any service logic needs to be changed, it can be changed in one location.
Separation of Concerns: Your components will only be concerned with what they need to and display. All the processing of data and other logic happens in decoupled services.

Modules

Components act as a way to organize each of the components in the application.

Modules are responsible for the:

Declarations: all the components, directives and pipes that belong to this module.
Exports: the declarations that should be visible and usable in the other modules of the application
Imports: other modules and components that has to be used in the module.

This allows for a modularity system, where you’d break up your application into individual modules that are all responsible for their own concerns. This is common for a Domain Driven approach, where each domain acts as it’s own section in the application.

When you modularize your application, it separates the responsibilities that each part of the application (components) needs to run resulting in clearer code that is better to maintain and is less error prone.

Some other cool features

Pipes!

A pipe or allows you to transform data in an elegant way. One built in pipe, the Date pipe, turns your date object (which look like “1969-04-22T17:33:02Z”) and transforms it into something more appealing, 22 April 1969.

In addition, you can create your own custom pipes for things like currency formatting, enum formatting etc.

TypeScript as the default

Did I mention enums? This is possible in TypeScript, a super set of JavaScript that adds cool features such as type safety and enums.

This allows your application to maintain a constant state (in terms of data) from the database to the frontend.

Angular CLI

Angular comes with it’s own CLI (Command Line Interface), that allows you to execute commands to create, build and run your application. It also has commands that can be used to scaffold the code for components, services and modules.

Why you should be using it

With features like the Angular CLI and concepts like services through dependency injection and modularization, Angular allows you to write your application to scale effortlessly.

Angular has also been created with features to increase your overall productivity. It allows you to focus on pushing out new features and crushing the bugs that ‘magically’ appear in your app.

I hope you found this post insightful.

Be sure to check me out on Twitter for more Angular and development tips. Thanks for reading and have a great day! 😄

Why I Chose C#

Chadwin Deysel — Sat, 23 Apr 2022 16:48:13 +0000

Attention fullstack developers, there’s an imposter among us. Unfortunately, it’s me. I like to think of myself as a front end dev, disguised as a fullstack developer. So while I’m willing to on and learn multiple frontend options, the backend is maybe even more important.

Here’s why I’ve chosen C#

Open Source Project Maintained by Microsoft

While these two things don’t make it inherently better, it makes me sleep at night knowing that the language will always be optimized, improved on and supported.

Open source projects are always great as there is a high level of transparency and usually an active community of developers and companies that’s invested in the project.

Having the language backed by an active community is great, because if there are any short coming or ways to improve on it, the community will always do it’s best to improve on it.

It’s a Great Language

Apart from C#, I’ve briefly worked with languages such as Delphi, Python, Java and JavaScript. However C# has always been my preference.

It’s probably the Stockholm Syndrome talking as this was the language we had to learn in college. But I’ve never had any issues with the language itself getting in the way of my productivity and my ability to create applications.

It makes use of a syntax that is easy to understand, but it also doesn’t fall apart when the code starts getting too complex.

C# is fundamentally an OOP (Object Oriented Programing) language. This means that everything is comprised of objects and we can create and interact with objects and their methods and properties.

However C# also accommodates for certain Functional Programming, techniques such as Lambda Expressions, Fluent APIs etc. allowing you to speed up your productivity and the performance of your application.

.NET Ecosystem

or is it dotnet 🤔? either way...

You can’t mention C# without talking about the infamous .NET. While it has been the bane of developers in the past, due to it being proprietary, it has since become open source and the .NET Core update has pushed the limitations of what a development eco system can accomplish.

You can build pretty much everything with C# and .NET. From Mobile Applications, Web APIs, Video Games and AI tools.

Another benefit that .NET has introduced is it’s cross platform. .NET can be ran and hosted on both Windows and Linux.

This takes out a lot of frustration developers might have relating to hosting and opens up to organizations who either already have Windows Hosting or new organizations that wants to capitalize on Linux hosting.

NuGet Ecosystem

In as simple terms as possible, a NuGet package is a compressed file that is made up of compiled code (DLL). It can be created by any developer and then uploaded to the NuGet gallery, similar to NPM packages.

This has opened up the landscape for developers to create libraries that solve their organization's problems and even other developer’s problems.

There is also an infinite amount of great libraries that already exist out there. You have LINQ that acts as a universal data query syntax. AutoMapper for mapping types to other types. NUnit and Fluent Assertions for unrivaled Unit Testing. And many, many more.

You can also create your own private NuGet packages that’s specific to your organization. These packages can then be shared between developer teams to increase the consistency and productivity of your developers.

Bright Future

Since the introduction of .NET 6, the .NET eco system and C# has been on a contentious up.

New features are being added to C# as a language, such as record types, which focuses on maintaining records, typically from a database, without the extra leg work by doing things like making an Id of a record immutable once it’s been set, for example.

.NET has also put in a massive bid to run Web Assembly applications with Blazor. I’m a big fan of the idea of WASM for building web applications in a more performant and productive manner.

.NET Maui, is also another emerging technology out of the .NET eco system. This is going to allow developers to take their Blazor code and use that to create native cross platform applications on Android, IOS and Desktop.

Conclusion

C# is a great language that has a lot of useful features and interacts with one of the most powerful developer eco systems out there, .NET. It also has a future that I am keen to be a part of.

If you found this post useful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.

Thanks for reading and have a great day! 😄

Your Resume Is Not Important

Chadwin Deysel — Thu, 21 Apr 2022 17:47:44 +0000

Just completed your Bootcamp, CS Degree or Online Courses? Well, you need a job... So what’s next? A fancy website portfolio and resume right?

Not really.

I hate to be the bearer of bad news, but your website portfolio is not important and neither is your resume, especially if you’re just starting out.

So instead of spending your time poorly, rather do these things.

The Main Reason Your Portfolio is Not a Priority

Before we talk about what you need to do instead, I think you need to understand why spending so much time building a website portfolio is not a priority.

Your education does not end!

When we setup our portfolios and resume’s, we almost set it up with the mindset like: “Yes! I’m done learning, time to show the world what I can do”.

But that’s not a great mindset to carry with you. Instead, you should be looking at how you can constantly learn and improve on the skills that you’ve gained from your Bootcamp or CS degree, and document everything along the way.

Recruiters aren’t looking at how fancy your resume or website is, what they care about is “can you do the job?” and “are you taking initiative to improve”, because development, especially in real world, is a game of constantly solving problems and becoming better.

Work On Projects

One of the best ways to learn and validate skills is to apply them. Once you’ve completed a course or tutorial you should be applying your skills you gained by creating new projects.

Now you don’t want to create a cupcake program! Your project should go out to solve tangible problem.

The best possible outcome here is to solve a real life problem. Like for example, if you want to become a web designer, you might want to go to a local business and build a website for them for free in exchange for experience and a reference.

By working on projects, you can make this the highlight of your portfolio. But you also work on the most important ability any developer can have: The ability to solve real world problems by applying the knowledge that they have.

Maintain a Blog

Blogging is one of the most beneficial things you can do as a developer. It has so many benefits that it’s actually ridiculous.

Some benefits include being able to document your journey, showcase your work and build an audience. But in addition to that, you also train your ability to think effectively.

When we write, we think. And the ability to think and articulate your thoughts effectively is the most important soft skill when being a developer that no body ever really talks about. And like with most things in life, this is a skill and a skill that can be improved on.

So you can start very easily by creating an account on sites like Dev.to and Hashnode and start writing about your journey, thoughts, projects, ideas etc.

Be Active on GitHub

You probably know GitHub as a “cloud solution for version control”. But behind that, lives the biggest network comprising of various types of networks of developers.

Millions of developers work on hundreds of thousands of projects that can be a simple as their todo app to helping with the maintenance of React or even the next startup. And you can and should be apart of this.

For a start improve your profile by adding an attractive Read.me and profile picture.

Then anytime you work on a project always upload your code on GitHub. Bonus points if you create a new commit for every feature you add into your project. You also want to create separate Read.me files for your projects where you details what the project is, steps to run it, where you can find a live version etc.

Here’s a great template to get started!

Contributing to open source is another great way to get involved in the community. There are tons of open source projects out there that you can work with.

Build a Network

No.. I’m talking about your LinkedIn network.

While it may be advantageous to have a bunch of recruiters added on LinkedIn, its even better to have a personal network made up of other software developers.

This could be aspiring software developers like yourself, established developers that can act as mentors or someone who’s just one step ahead of you. Like minded individuals who you can assist or of who can assist you, is great to have.

A great place to start is on Twitter. Look up accounts that are in the top of the space you’re interested in, for example React Development, and start interacting in their communities. Reply to tweets, post open ended questions and tweet out your content.

You can also do this on the blogging platforms that I mentioned. Take some time to read through posts that other developers have made and react to their posts, but always in a genuine way.

Attending real life meetups is also a great way to get in touch with real people in your current location.

The best advice I can give, immaterial of whether this is IRL or over the web, always be honest and avoid being unnecessarily disagreeable and disingenuous in any way. Also, leave you ego in the sink when you spit your toothpaste.

Conclusion

While I’m not saying that your portfolio and resume is useless, when starting out it’s not that big of a priority. Focusing on improving yourself and documenting your journey is a great way to gain credibility and exposure so that you can land the job of your dreams.

As always thank you for reading, if you found this post useful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.
Thanks for reading and have a great day! 😄

How to choose a programming language

Chadwin Deysel — Thu, 14 Apr 2022 14:30:57 +0000

I was watching a video, titled: “The future of the fullstack developer? Taylor Otwell interview” by Justin Jackson. One of the topics that the creator of Laravel, touched on was the difference between what the online community of development looks like versus the real world. In one snippet he said:

“On Twitter it feels like everyone’s building React Frontends, they’re calling GraphQL APIs or Firebase APIs. But I know deep down, the reality is 99.9% of web applications are not that.”

It made me realise that it’s getting harder and harder to choose a language and framework to stick to, especially with the culture of over representing one language while saying that another is “dead”.

So whether you are planning to start a new project or you’re a beginner looking for a starting point, hopefully this post will help you in choosing the right language.

Pick Something Well Backed

While a well backed technology doesn't point to a perfect tool, it does point to a tool that is well maintained, documented and one that is not going to drop off the face of the Earth anytime soon.

Another thing you should look for is a language that has large interest. But not just public opinion and the amount of people using it, but the amount of real life projects that implement it as well.

Hype plays a huge factor in what gets represented on social media and becomes public opinion. It’s not uncommon for the founders and contributors of technologies to reach out to content creators or even sponsor Bootcamps to get their project out there.

Public perception and social media might point to one language or framework being used by everyone when in reality the majority of the web is still powered by PHP, Ruby and C#.

Type of Application

Another big consideration is the type of application you are going to build.

Most of the top languages can all basically do the same things. For example, you can use C# for Machine Learning, Python for Web Development and JavaScript for mobile applications.

However, some are best suited for certain tasks. This comes down the general eco-systems, community of developers, existing libraries and available examples out there.

So while you can do machine learning and data analytics with C# in the .NET eco system, you’ll have a better experience building it in Python where the eco-system is more fleshed out.

The same concept applies to web development, mobile app development, gaming development etc.

How Does It Fit Into Existing Stacks

A stack essentially is a collection of languages, libraries and frameworks that come together to produce an end result.

For example one of the most popular stacks, MERN, stands for:

MongoDB (Database)
Express.js (APIs)
React (Frontend)
Node.js (Server)

Each of these technologies are designed to work well with each other, and there’s a lot of resources, documentation and developers that use this stack to build out their applications.

You don’t want to pick an option that exists in a bubble. The language you choose should have a good ecosystem (libraries) to communicate with a database, or a communicate with an API or with a gaming engine... Whatever your needs are.

Consider you location

Another major factor is picking the right tool is your location.

I live in South Africa and I recently made an interesting discovery. Johannesburg (where I’m currently based) is located in the Province of Gauteng and Cape Town is situated in the Western Cape.

After a quick search on Google Trends, you’ll see that JavaScript (more popular with startups) has a larger amount of searches in the Western Cape, while C# (more common with larger enterprises) has more searches in Gauteng.

`JavaScript`

`C#`

It makes sense, as there’s a lot of newer startups that are popping up in Cape Town while the more established, enterprise companies are found in Johannesburg.

Choosing the right language in the region that you are in is essential because if you pick a language that nobody really uses, you will have a harder time finding opportunities in the way of employment or potential prospects to add to you team or project later down the line.

Conclusion

By considering your location, your potential tech stack, the backing that the language receives as well as the type of application you hope to build, you start yourself off on the right foot when choosing a language to learn.

Why I choose Angular

Chadwin Deysel — Mon, 11 Apr 2022 15:11:16 +0000

Introduction

For frontend developers, there are a lot of options out there. Options such as React, Vue.js or even Next.js if you really want to be in vogue seems to be all the talk. But I always find myself falling back to one option, Angular.

In this post, I’ll go through my use case and a brief description of what Angular is why I choose Angular.

My Current Use Case

Admittedly, Angular is not a one size fits all. It’s general learning curve and lack of simplicity can make it a bad option in some use cases.

So before I talk about the nitty gritty of Angular, I need to talk about how my current workflow.

I currently work on larger enterprise applications with a lot of moving parts, that is super reliant on the collection and presentation of data. This is true both for my professional and personal projects.

Essentially, the apps I build end up being massive forms that act as a data presentation tool and an interactive dashboard. And Angular, as it so happens, is really good at doing this and it does so efficiently.

How? Well, let me explain.

Framework vs Library

One of the things that makes Angular great to use, is the fact that it is a frontend framework and not a library like React.

What’s the difference?

When thinking about the a framework vs a library, the best way to think about it is that a library is like pieces of individual furniture while a framework is made up of sets of ready made rooms.

Frontend libraries gives you the basic tools that focus on a base concept while a framework gives you a lot more structure to play around with.

You sacrifice some flexibility, but it gets made up for as a lot of the functions and features you would usually end up adding to your application would usually be taken care of.

It’s worth noting that frameworks generally contribute to a larger package size which impacts the performance of the application. But this is usually offset because a lot the functionality is already included and you wouldn’t need to rely on additional libraries to give you some common features.

My Favourite Angular Features

Angular, comes with everything you’ll really need to get a web application up and running. Some features include handling routing, the building of forms and automated testing suites.

Angular also has it’s own CLI, called Angular CLI. Apart from using it to creating and configuring a new Angular application, you can also execute certain commands to scaffold bits of code for services, modules and components (the building blocks of Angular).

Another thing that’s worth mentioning is that it runs standard with TypeScript, a superset of JavaScript that includes type safety and other features. This allows you to maintain a consistent state in the data across your application (from database to frontend).

Angular Components

As mentioned, Angular like most frontend applications are made up of components.

Each Angular component is made of 3 parts (usually split up into 3 different files):

Component - The part that handles all the logic such as the lifecycle of the component, injecting services, events etc.
Template - The template is HTML that allows for angular code to embedded into it so you can insert data and handle basic logic.
CSS Module - This allows you to add styling to the component, .

While this might seem like unneeded complexity at first, breaking up the components like this gives you better organization of the component and prevents it from becoming cluttered and overcomplicated once the complexity of the component increases.

Angular Scales Effortlessly

Angular Components, makes use of services that’s injected through dependency injection to add functionality such as interacting with you REST API. Some of the benefits dependency injection include maintainability and testability, which is crucial for your applications ability to scale.

The components can also be organized into modules which are responsible for the imports, exports and declarations for the components and any other components and tools you wish to interact with the application.

Breaking up your application like this is what is referred to as modularizing. When you modularize your application, it separates the responsibilities or concerns that each part of the application needs to run resulting in your code being better to maintain and it being less error prone.

The great thing about Angular is that, once again, it comes with these functions out the box and uses the CLI to scaffold the code and structure of you app making the process of making improvements and maintaining the project a breeze.

Conclusion

As a fullstack developer working on enterprise applications, Angular covers a lot of the difficulties that I might encounter in the development process.

While Angular might be intimating because of the initial complexity and learning curve, it’s a great framework to use for developing everything from prototype to a fully fledged large scale application.

If you found this post insightful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.

Thanks for reading and have a great day! 😄

How to use Chart.js your Angular 13+ project

Chadwin Deysel — Mon, 04 Apr 2022 14:31:16 +0000

Charts are one of the best, if not the best, too to use to visualize data. Every developer should be able to use charts in their project. In this tutorial I'm going to show you how to add charts into your project using the library, Chart.js.

Note: This tutorial was made using the latest versions at the time of writing:

Angular ~13.3.1
Chart.js ~3.7.1

Getting started

First we'll need to create a new Angular project.



ng new angular-chart-js-tutorial

We'll select no routing and CSS.

Then we'll create a new component for the Chart itself. So navigate into your project file and use use the following command:



ng g c components/chart

I'm using the short hands for generate component and creating a new file for our components.
Once completed, open the project your code editor and navigate to the "app.component.html" file. Once there, replace all the existing code with the following:



<h1>Chart.js Example</h1>

<app-chart>

</app-chart>

Creating the chart

Now let's go to the "chart.component.html" file in the "components" file and add the following code:



<div class="chart-container" style="width: 800px; height: 600px;">
    <canvas id="my-chart">
    </canvas>
</div>

Chart.js, uses the canvas element to draw charts. Now let's switch to the "chart.component.ts" file and add the following imports:



import {Chart, ChartConfiguration, ChartItem, registerables} from 'node_modules/chart.js'

Then we'll create a method and call it in the ngOnInit() method. This method is going to be responsible for creating our chart. Your code should look something like this:



ngOnInit(): void {
    this.createChart()
}

createChart(): void {

}

In createChart(): void method, we'll need to following along some steps. Start by registering the chart.



Chart.register(...registerables);

Now we'll setup the data our chart is going to be using.



const data = {
      labels: ['January','February','March','April','May'],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [10, 5, 2, 20, 30, 45],
      }]
};

Chart.js, also allows us to customise the Chart itself by configuring the options.



const options = {
      scales: {
        y: {
          beginAtZero: true,
          display: false
        }
      }
    }

All these options do is to start the y-axis from zero and hide the y-axis to give a cleaner feel. Once that's completed, we'll configure the chart.



const config: ChartConfiguration = {
      type: 'line',
      data: data,
      options: options
    }

Note the type of chart we'll be creating will be a line chart. You can use other options such as pie, doughnut, bar, bubble etc. For a list of all the types, you can get started here. Now we'll grab the chart item, the canvas on which the chart will be displayed on.



const chartItem: ChartItem = document.getElementById('my-chart') as ChartItem

Finally, we'll create the chart with this final line of code.



new Chart(chartItem, config)

End Result

To view the end result, open up the terminal, type ng serve and navigate to localhost:4200 in your browser once your app startup is completed.

The end result should look something like this

Conclusion

For more details about Chart.js, be sure to check our their website, official repository and be sure to give them a star!

I've also created a repository for you to follow along in case you get stuck.

If you found this post useful, please follow me on Twitter for more Angular and development tips and check me out on GitHub.

Thanks for reading and have a great day! 😄