Angular 2 – How to set max date to today for date input?

 <input class="alert-input date-input" #dob="ngModel" name="dob" max="2017-04-01" [(ngModel)]="leadDetail.dob" type="date"></div>

How can i set the max date to today instead of 2017-04-01?

I tried following methods –

 <input  max="today" type="date"></div>
 <input  max="{{today | date:'yyyy-mm-dd'}}" type="date"></div>

Class –

public today = new Date();

but no luck.


Source: stackoverflow-javascript

Using component encapsulated in a module from other module in angular 4

I am developing an angular 4 app and I have two modules, the first module encapsulate some features that I need to use in others modules. For example I have the first module called SRModule I have imported SrCrComponent component:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; 

// module imports
import { SrCrComponent} from './sr-cr';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    SrCrComponent
  ],
  declarations: [
    SrCrComponent
  ]
})
export class SRModule {}

I want to use SrCrComponent in other component of another module, but I can get figure out how to use.

In my second module called ReportsModule, I have imported SRModule on it

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CPComponent } from './cp/cp.component';
import { SRModule } from "../sr-module/sr.module";

@NgModule({
  imports: [
    CommonModule,
    SRModule
  ],
  declarations: [
    ReportsComponent,
    ChartPeriodComponent,
    ChartSegmentationComponent
  ]
})
export class ReportsModule { }

My question here is, how to use SrCrComponent component declared inside CPComponent on ReportsModule?

This is my CPComponent ts file:

import { Component, OnInit } from ‘@angular/core’;

@Component({
  selector: 'app-chart-period',
  templateUrl: './chart-period.component.html',
  styleUrls: ['./chart-period.component.css']
})
export class CPComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

In my html of CPComponent I have a sr-gg component but not work,

<h2> Bar Chart</h2>
<sr-gg></sr-gg>

Oviously 'sr-g' is not a known element in ReportsModule, in fac, this is the error that console is showed me, but I don’t know where I need to declare or it should be inherit when I import SrCrComponen.


Source: stackoverflow-javascript

How to create Promise, for modal confirm dialog

I am actually using Angular 2, but I found a solution, but it seems to me like it is just an workaround. And it isn’t fully working right now.

I created an service, that can be injected anywhere, and an component, that sits at root component template.

export class DialogService {
    input: {
        observer: Observer<boolean>,
        observable: Observable<boolean>
    } = {}
    output: {
        observer: Observer<DialogEvent>,
        observable: Observable<DialogEvent>
    } = {}

    constructor(){
        this.input.observable = new Observable((observer: Observer<boolean>) => {
            this.input.observer = observer
        })
        this.output.observable = new Observable((observer: Observer<DialogEvent>) => {
            this.output.observer = observer
        })
    }

    ask(question: string, cancel: string, accept: string) {
        this.output.observer.next({question, cancel, accept})
        return this.input.observable.toPromise()
    }
}
export class DialogComponent {
    constructor(private dialogService: DialogService) {
        this.dialogService.ouput.subscribe(event => this.show())
    }

    cancel() {
        this.dialogService.input.next(false)
        this.hide()
    }

    accept() {
        this.dialogService.input.next(true)
        this.hide()
    }
}

This setup works to the point, that it will open on ask in service, and close, with correct function (accept, or cancel), but the promise is not created, or fired.

Anyway, if there is a better way to make this work, I al 100% for it.


Source: stackoverflow-javascript

Angular 2 selectBox value

how can I display selected value from selectBox. I can’t use [(ngModel)] binding to property, because number of selectBoxes is dynamically changing.

<tr *ngFor="let room of term.rooms">
    <th>{{room.name}}</th>
    <th><select #box><option *ngFor="let price of  getPrices(room.id)" [ngValue]="price">{{price.name}}</option></select></th>
    <th><!--ValueHere--></th><!--for example something like this price.value-->
  </tr>


Source: stackoverflow-javascript

Converting an image to base64 in angular 2

Converting an image to base64 in angular 2, image is uploaded from local . Current am using fileLoadedEvent.target.result. The problem is, when I send this base64 string through REST services to java, it is not able to decode it. When i try this base64 string with free online encoder-decoder, there also I cannot see decoded image. I tried using canvas also. Am not getting proper result. One thing is sure the base64 string what am getting is not proper one, do I need to add any package for this ? Or in angular 2 is there any perticular way to encode the image to base64 as it was there in angular 1 – angular-base64-upload package.


Source: stackoverflow-javascript

Loading a config file parameter in Angular2

I have a problem which I know has solutions but I am not sure how to implement it. I have a file that reads a server URL in src folder. But depending on the environment configuration, i need to read the server URL from the root folder into the typescript file in src folder. How can it be done?

Currently in my ts file, i have this line

export const ServerURL = <serverURL>;

I am importing this file into other components which uses the server URL.

import { ServerURL } from '../file-path';

Now I need to read this ServerURL from a config file in the root of this application.Do we use a seperate js or JSON file to read the server URL or do can it be done in the systemjs.config.js file which is one of the main file of the application? Any advice would be great!


Source: stackoverflow-javascript

ES6 arrow functions arguments

export const emailMatcher = 
           (control: AbstractControl): {[key: string]: boolean} => {
  const email = control.get('email');
  const confirm = control.get('confirm');
  if (!email || !confirm) return null;
  return email.value === confirm.value ? null : { nomatch: true };
};

I understand the use-case for arrow functions, but can anyone explain me the below line:

export const emailMatcher = 
           (control: AbstractControl): {[key: string]: boolean} => {

We are creating a function emailMatcher to which we are passing control as a argument. What does this line {[key: string]: boolean} do? I am not really understanding how that applies to return type of the function.


Source: stackoverflow-javascript