Github:
Code
app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
// solid icons use the prefix ‘fas’
// regular icons use the prefix ‘far’
// brand ‘fab’
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far, faArrowAltCircleLeft } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
@NgModule({
imports: [
BrowserModule,
FormsModule,
FontAwesomeModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
constructor() {
library.add(fas, far, fab);
}
}
Component
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
})
export class AppComponent implements OnInit {
dates = new Date();
componentDate: number;
componentYear: number;
componentMonth: number;
componetHour: number;
componetMinute: number;
// solid icons use the prefix ‘fas’
fasCalendar = ['fas', 'calendar'];
fabAngular = ['fab', 'angular'];
ngOnInit() {
this.componentDate = this.dates.getDate();
this.componentYear = this.dates.getFullYear();
this.componentMonth = this.dates.getMonth();
this.componetHour = this.dates.getHours();
this.componetMinute = this.dates.getMinutes();
}
}
Template
<fa-layers>
<fa-icon
[icon]="fasCalendar"
size="8x"
transform="down-5"
></fa-icon>
<fa-icon style="color:red"
[icon]="fabAngular"
size="1g"
transform="down-5 right-40">
></fa-icon>
<fa-layers-text
content="{{ (componentMonth > 9)? componentMonth: '0' + componentMonth }}"
transform="down-5 right-10"
></fa-layers-text>
<fa-layers-text
content="{{componentYear}}"
transform="down-5 right-80"
></fa-layers-text>
<fa-layers-text
content="{{ (componentDate > 9)? componentDate: '0' + componentDate }}"
transform="down-14 right-12"
size="4x"
></fa-layers-text>
<fa-layers-text
content="{{ componetHour }}"
transform="down-95 right-30"
size="1x"
></fa-layers-text>
<fa-icon
[icon]="['fas', 'cog']"
transform="down-98 right-45 shrink-12"
style="color: #fff"
[spin]="true"
></fa-icon>
<fa-icon
[icon]="['fas', 'cog']"
[spin]="true"
style="color: #fff"
transform="down-92 right-45 shrink-12"
></fa-icon>
<fa-layers-text
content="{{ (componetMinute > 9)? componetMinute: '0' + componetMinute }}"
transform="down-95 right-60"
size="1x"
></fa-layers-text>
</fa-layers>
Other Related Posts:
*Simple takeAway Angular input toggle using Font Awesome
*Equality & strict-Equality Operators in javaScript
*Making unit-test fun again with Functional Programming
Image by StockSnap from Pixabay
Top comments (0)