DEV Community

Cover image for Simple take-away Angular input toggle using Font Awesome
Leo Lanese
Leo Lanese

Posted on

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:

Alt Text
Alt Text


stackblitz Angular input toggle


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: [

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

Component Implementation:


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

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

  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




GitHub code example:

Top comments (1)

georgy99 profile image

how i can testing with angular testing library? can tell me some tips?