Simple takeaway Angular calendar

Github:

Simple Calendar Angular

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

---

{ 'Leo Lanese',
'Building Inspiring Responsive Reactive Solutions',
'London, UK' }

Portfolio http://www.leolanese.com

Twitter: twitter.com/LeoLaneseltd

Questions / Suggestion / Recommendation ? [e-mail]

DEV.to: www.dev.to/leolanese

Blog: leolanese.com/blog