Simple take-away Angular input toggle using Font Awesome

What we are going to do:

We are going to create a simple reusable input select toggle. This is a simple take away HTML input check using Angular and fontAwesome that can be handy to use in any application:

fontawesome icons:

https://fontawesome.com/icons/square
https://fontawesome.com/icons/check-square

Demo:

stackblitz Angular input toggle

Setup:

We need to install the next few dependencies under an Angular project.

_{setup package.json}

...
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
...

Module declaration:

We need to import the @fortawesome dependencies in the app.module, and use the constructor to add the faSquare andfaCheckSquare from 'free-solid-svg-icons' to the library.

_{setup app.module.ts}

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';


 imports: [
...
    FontAwesomeModule
...
]

export class AppModule {
  constructor() {
    library.add(faSquare, faCheckSquare);
  }
}

Component Implementation:

_Component

import { Component } from '@angular/core';

import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isActive = true;

  faUser = ['fas', 'square'];
  faUserDefault = ['fas', 'square'];
  faUserCheck = ['fas', 'check-square'];

  toggle(): boolean {
    return this.isActive = !this.isActive;
  }

  onClickBtn(e) {
    this.toggle() ? this.faUserDefault = this.faUser : this.faUserDefault = this.faUserCheck;
  }
}

Template implementation

_Template

<fa-icon
  [icon]="faUserDefault"
  (click)="onClickBtn($event)"
></fa-icon>

GitHub

GitHub code example:
https://github.com/leolanese/simple-input-toggle

Blog