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
Top comments (1)
how i can testing with angular testing library? can tell me some tips?