Datepicker In Angular 2

To use the datepicker in the angular 2 application use ng2-bootstrap

include ng2-bootstrap and moment in your package.json and hit npm install to install both in the node_modules

include datepicker module in your module file. The app.module.ts file will be,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { DatepickerComponent } from './datepicker.component';

@NgModule({
  imports:      [ BrowserModule, DatepickerModule],
  declarations: [ AppComponent, DatepickerComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
    

Create the text box in html and write the functionality in the ts file like

<div class="container">
    <div class="col-md-6">
        <label for="datepicker" class="text-primary">Date Picker</label>
        <div class="input-group date-picker">
            <input type="text" class="form-control" name="datpicker" id="datpicker" placeholder="Date Picker" [(ngModel)]="datePickerValue" (focus)="showDatePicker()" readonly>
            <span class="input-group-addon" (focus)="showDatePicker()"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></span>
        </div>
        <div class="dp-popup" *ngIf="isDatePickerShown">
            <datepicker [(ngModel)]="datePickerDate" [showWeeks]="false" [maxDate]="today" [ngModelOptions]="{standalone: true}" (selectionDone)="dateSelected($event)"></datepicker>
        </div>   
    </div>
</div>
    

import { Component, OnInit, ViewChild } from '@angular/core';
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import * as moment from 'moment';

@Component({
    selector: 'datepicker-component',
    templateUrl: 'datepicker.component.html',
    host: {
        '(document:click)': 'handleClick($event)'
    },
})

export class DatepickerComponent {
    
    isDatePickerShown:boolean = false;
    datePickerDate;
    datePickerValue;
    today:Date = new Date();

    constructor() {
        
    }

    showDatePicker(){
         this.isDatePickerShown = true;
     }

     hideDatePicker(){
         this.isDatePickerShown = false;
     }

     dateSelected(event){
         this.datePickerValue = moment(event).format("YYYY-MM-DD");
         this.hideDatePicker();
     }

     handleClick(event){
         if(!(event.target.closest('datepicker') != null || event.target.closest('.btn') != null || event.target.closest('.date-picke') != null)){
             this.hideDatePicker();
         }
     }

}
    

Bootstrap Modal in Angular 2

To use the bootstrap modal in the angular 2 application use ng2-bootstrap

include ng2-bootstrap and moment in your package.json and hit npm install to install both in the node_modules

include modal module in your module file. The app.module.ts file will be,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { BootstrapModalComponent } from './bootstrap-modal.component';

@NgModule({
  imports:      [ BrowserModule, ModalModule],
  declarations: [ AppComponent, BootstrapModalComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
    

Write the bootstrap modal in html and write the functionality in the ts file like

<div class="container">
        <button type="button" class="btn btn-default" (click)="showModal()">Open</button>
    </div>
    <div bsModal #bootstrapModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="bootstrapModal"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" (click)="closeModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Bootstrap modal</h4>
            </div>
            <div class="modal-body">
                <p>This is bootstrap modal</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="closeModal()">Close</button>
            </div>
        </div>
    </div>
</div>
    

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
    selector: 'bootstrap-modal',
    templateUrl: 'bootstrap-modal.component.html'
})

export class BootstrapModalComponent {
    
    @ViewChild('bootstrapModal') public bootstrapModal:ModalDirective;

    constructor() {        
    }

    showModal(){
        this.bootstrapModal.show();
    }

    closeModal(){
        this.bootstrapModal.hide();
    }

}
    

Using forge-js in angular 2 for calculating sha256

To use forge-js in angular 2 application for using cryptographic function like sha clone the repository from the git and build the files and include the forge.all.js file in your index.html file

Since the forge-js is not written in typescript and not having the d.ts file. We have to declare the forge and use the functions inside that.

To calculate the sha256 enter the code like.

declare var forge:any;

export class Common{
    getSha256String(value){
      var md = forge.md.sha256.create();
      md.update(value);
      return md.digest().toHex();
    },
}

Now simply call the method getSha256String with the value to get the encrypted value.