Import/export modules in Typescript

I’m trying to figure out how one would import/export es6 modules using typescript. Here is what I got so far. Below is the HTML, JavaScript and the tasks. How do I get this to work? I want all modules that get imported to main.ts to bundle into one single .js file. Right now the import/export does not work.

File structure:

enter image description here

index.html.

<html>
<body> etc...
    
  System.config({
    baseURL: './'
  });

  System.import("build/js/bundle.js")
    .then(function() {
        console.info("System.import was successful.");
    })
    .catch(function(response) {
        console.error("Error in System.import, could not bootstrap.", response);
    });

main.ts

import { Foo } from './components/button/index';
let f = new Foo();
console.log(f);  //does not output anything, and i get no errros.

button/index.ts

export class Foo {

    public name:string = 'test';
}

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"experimentalDecorators": true,
"removeComments": false
},
"exclude": [
  "node_modules"
]

}

my gulptasks:

var tsProject = ts.createProject("tsconfig.json", {
    outFile: "bundle.js"
});

gulp.task('lint:ts', function() {
    return gulp.src('./src/scripts/**/*.ts')
        .pipe(tslint({
            formatter: "verbose"
        }))
    .pipe(tslint.report())
});

gulp.task("compile:ts", ["lint:ts"], function() {
    return tsProject.src()
        .pipe(tsProject())
        .js
        .pipe(gulp.dest("build/js"));
});


Source: stackoverflow-javascript

Building a Filter Function to Assign Values by Type in Angular App

I have a series of checkbox filters in my Angular app, that when clicked on by a user in the view, should trigger functionality that queries the API to return filtered results. I have these filters working when used one at a time. However, I’m having difficulty figuring out how to structure the function so that it can hold ALL currently selected filters. The function call makes use of a Mongoose/MongoDB feature that lets us pass key/value pairs that correspond to fields directly into the payload of a post request.

This is what I initially had (that works, but only by handling one filter at a time via if/else statements). It basically says, if the “type” is of “lan”, then assign value accordingly. And if no value is provided (i.e. the user has de-selected all filters), then just send an API call request without including any inputed parameters (the last “else” here):

    onFilterReceived(value, type) {
        if (type === 'lan' && value) {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting",
                "languages.primary" : { $in: value }
                });
        } else if (type === 'zip' && value) {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting",
                "zipCode" : { $in: value }
                });
        } else {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting"
            });
    }

I am getting both “value” and the corresponding “type” sent via Angular’s Output() and EventEmitter(), like this:

        <list [records]="records"
            (sendLanguage)="onFilterReceived($event, type = 'lan')"
            (sendZipcode)="onFilterReceived($event, type = 'zip')">
        </list>

Again, all of the above works as is.

However, what I’m trying to do is build this function is such a way that, when the value received is of type “lan”, that the corresponding “value” in that case is applied to “value” here:

"languages.primary" : { $in: value }

And then when the value received has a corresponding type of “zip”, that “value” is then applied to “value” here:

"zipCode" : { $in: value }

The end goal being that I will be able to send a request over the API that holds the values of multiple filters AT THE SAME TIME.

I’ve tried numerous formulations, but so far have been unable to get this to work as desired. I’ve been using ‘if/else’ statements, like above, but again, that will only allow me to hold a value from one filter at a time. How could I make sure I’m passing each of the currently selected filter values?

If someone could provide even a basic example of how to formulate this kind of logic, it’d be very helpful.


Source: stackoverflow-javascript

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

Node.js + Webpack + Typescript = ENOENT: no such file or directory, open ‘//package.json’

As the node_module I need doesn’t have a @types repo, I tried to import it and I got this:

Error: ENOENT: no such file or directory, open '//package.json'

My .ts

import * as IWatermark from 'image-watermark';

When I import this module the Webpack insert this code into the bundle.js:

exports = module.exports = {
  embedWatermark: embedWatermark,
  embedWatermarkWithCb: embedWatermarkWithCb,
  version: JSON.parse(
    __webpack_require__(22).readFileSync(__dirname + '/package.json', 'utf8')).version
};

And then it tries to load my package.json with this path //package.json.

How do I properly load a non-typescript module into my typescript code?

Do I need a specific configuration for resolving this?

OBS: It’s Webpack 2


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