Angular ngx-translate TranslateLoader ohne http Modul

Compatibility with old browsers, as the Firefox version <= 5 to reach, can you do that angular http Do not use module. The NGX-translate Modules bneötigt a loader, It loads the correct language via AJAX request. Also with the XMLHttpRequest and an Observalbe solve this can:

import {Injectable} from '@angular/core';
import {TranslateLoader} from '@ngx-translate/core';
import {Observable} from 'rxjs/Observable';

export class LanguageLoader implements TranslateLoader {

  getTranslation(lang: string): Observable<any> {
    return Observable.create(function (observer) {
    let url = `./assets/i18n/${lang}.json?=` + new Date().getTime();
    let xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE || xhr.readyState == 4) {
              let response = JSON.parse(xhr.responseText);
      }'GET', url, true);

In the app.module.TS can you then embed the loader as follows:

  loader: {provide: TranslateLoader, useClass: LanguageLoader}

JavaScript debugging on the console with console.table()

The new JavaScript method Console.table() is very hilfgreich, to represent objects and arrays on the console.


var data = [
        {"id": "Open"},
        {"id": "OpenNew", "label": "Open New"},
        {"id": "ZoomIn", "label": "Zoom In"},
        {"id": "ZoomOut", "label": "Zoom Out"},
        {"id": "OriginalView", "label": "Original View"},
        {"id": "Quality"},
        {"id": "Pause"},
        {"id": "Mute"},
        {"id": "Find", "label": "Find..."},
        {"id": "FindAgain", "label": "Find Again"},
        {"id": "Copy"},
        {"id": "CopyAgain", "label": "Copy Again"},
        {"id": "CopySVG", "label": "Copy SVG"},
        {"id": "ViewSVG", "label": "View SVG"},
        {"id": "ViewSource", "label": "View Source"},
        {"id": "SaveAs", "label": "Save As"},
        {"id": "Help"},
        {"id": "About", "label": "About Adobe CVG Viewer..."}


Produces the following output in the developer tools in the chrome:



Angular 5 URL without index.html

At an angular application you must call by default the index.html, Thus starts the application on an Apache Web server. This also without / index.html with the domain alone only ( funktioneirt, do you set this:

1. Create a .htaccess file in src/.htaccess with the content:

DirectoryIndex index.html

2. Change the base URL in the src/index.html

<base href="">

3. GGF. Add .htaccess to the build process in the .angular cli.json

"apps": [
    "assets": [


Configure angular German localization

To configure the German language for Fehlermeldugen and also the date format angular from Version2, do one the following set in the app.modules.ts:

import { LOCALE_ID} from '@angular/core';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localeDe, localeDeExtra);

 providers: [
 { provide: LOCALE_ID, useValue: 'de' },

Javascript disable all readonly Dropdowns and send via Form

Readonly select-Tags are not allowed in HTML until now, but can be used.

An alternative would be to use the disabled = true attribute, but this will not send the select value on form submission.

An easy solution would be to disable the selection with Javascript and leave it readonly:

$( document ).ready(function() {

The only problem is, that you can still tab throw the form and select elements with your keyboard but the mouse can not select element from the dropdown.

Create animations with JavaScript

Small animation, like that disappear a div block, can setTimeout JavaScript very easy with the function() create.

The logic is always the same:

For each movement frame the size or Posiition of object is changed using the setTimeout function at a certain time, so that at the end of strung together an animation comes out for the human eye.


Click me

[script type="text/javascript"]// < ![CDATA[
var duration = 10; //seconds
var running = 0
var element;

function SetHeight(height) { = height + "px";
//console.responsen>("Ajax Call Success"); }, error: function (response) { handleError(response); } } ); return response; }(height);
function hideObject() {
//console.responsen>("Ajax Call Success"); }, error: function (response) { handleError(response); } } ); return response; }("hide"); = 'none';

function removeObject(id) {
if(running) return
running = true;

element = document.getElementById(id);
height = element.offsetHeight;
var until = height;
var i;
for (i = 0; i <= until; i += 1) {
height = height - 1;
setTimeout("SetHeight(" + height + ")", i * duration);
i = 1
setTimeout("hideObject();", i * duration);
// ]]>

[/inline] more…

TinyMCE focus and blur events JavaScript

You can treat as follows the TinyMCE focus and blur events with JavaScript:

        <script type="text/javascript">
            $( window ).load(function() {
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "focus", function(){
                tinyMCE.dom.Event.add(tinyMCE.getInstanceById("foo_id").getWin(), "blur", function(){

Bing maps API tutorial

Embedding Bing maps on the Web page is very similar to how Google maps. The free annual use is at 10 millions requests per year, After that has to be paid

First, you need a key, the free using a Windows ID account (e.g.. via Hotmail account) can request and automatically gets here.

Microsoft offers 5 various libraries with modular functionality to, said Map control Library is the most important for Web Developer with JavaScript. U.a. There is a library for Windows apps store and also interesting a rest service for geocoding requests (also reverse geocoding) and route calculation. It gives an overview of all libraries here.

For starters, you can quickly test a map with the following code and its key:

<script type="text/javascript" src=""></script>
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
        var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
            {credentials: "key_here",
                center: new Microsoft.Maps.Location(45.5, -122.5),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 7});


or cleaner than JavaScript class:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="bing.js"></script>
<div id='bingmapsDiv' style="position:relative; width:400px; height:400px;"></div>
<script type="text/javascript">
var bingMaps = new BingMaps("bingmapsDiv");

and with the Bing.js Class:

function BingMaps(mapId){
    this.mapId = mapId;
    this.key = "my_key";
    this.initMap = function(){
        var map = new Microsoft.Maps.Map(document.getElementById(this.mapId),
            {credentials: this.key,
                center: new Microsoft.Maps.Location(45.5, -122.5),
                mapTypeId: Microsoft.Maps.MapTypeId.road,
                zoom: 7});