JavaScript

md-pseudo-checkbox

@NgModule({
    imports: [
       
        TreeviewModule.forRoot(),
        BrowserModule, FormsModule, HttpModule,
        MaterialModule,
        FlexLayoutModule,
        RouterModule.forRoot([
            { path: '', component: aboutComponent, pathMatch: 'full' },
            { path: 'about', component: aboutComponent }
           

        ]
            ,            { useHash: true }
        ),
        TranslateModule.forRoot({

            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps:[Http]
            }

        }),

      
        Ng2FilterPipeModule,
        LoadingModule.forRoot({
            animationType: ANIMATION_TYPES.threeBounce,
            backdropBackgroundColour: 'rgba(0,0,0,0.1)',
            backdropBorderRadius: '4px',
            primaryColour: '#0000ff',
            secondaryColour: '#0000ff',
            tertiaryColour: '#0000ff'
        })
        ,
        BusyModule
        , BrowserAnimationsModule
        ,OTFModule
  
    ],


    declarations: [AppComponent, DclWrapper, SanitizeDirective, aboutComponent, LibComponent,  Menu, ReplacePipeComponent, OrderPipeComponent, aboutComponentLoader],
 
    bootstrap: [AppComponent]
   

})

import { Component, OnInit,ViewChild,ViewContainerRef,Compiler,Injector,NgModuleRef,AfterViewInit,NgModule} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HttpService } from '../servizai/http.service.component';
import { Cookie } from 'ng2-cookies';
import { MaterialModule,MdCard,MdCardModule,MdCardContent } from "@angular/material";
import * as GLOBALUS from '../globalus/globalus';

import {Observable, Subscription } from 'rxjs';

import { List } from 'linqts';

import { MdMenuModule } from '@angular/material';


import { DomSanitizer, SafeHtml } from '@angular/platform-browser';








@Component({

    templateUrl: '../../app/templates/about2.component.html',

    selector: 'about',
    providers: [HttpService],
  
    styles: [`
  .titel {text-transform: uppercase;
    color: #00467f;
    font-weight: bold;
    font-size: 14px;
}
`] 
    
})

export class aboutComponent implements OnInit {

    public puslHTML: any;

    public loading = false;

 

    busy: Subscription;


    constructor(private http: HttpService, private activatedRoute: ActivatedRoute, private _sanitizer: DomSanitizer,

        private _compiler: Compiler,
        private _injector: Injector,
        private _m: NgModuleRef<any>
    
        ) {

    }

   

    ngOnInit(): void {

  

    }


    

}

<div class="my-container">
    <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '10px' }"></ngx-loading>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-around start" fxLayoutGap="2%" style="background-color:#e8e8e8;padding:2%;">
  
   <otf-a-component></otf-a-component>
</div>

import { Compiler, Component, Injector, NgModule, NgModuleRef, ViewChild, ViewContainerRef } from "@angular/core";
import { MaterialModule} from '@angular/material';

@Component({
    moduleId: module.id,
    selector: 'otf-a-component',
    template: 'I am A component that inserts dynamic B component below: <div #vc></div>'
})

export class OTFAComponent {
    @ViewChild('vc', { read: ViewContainerRef }) _container: ViewContainerRef;

    constructor(private _compiler: Compiler,
        private _injector: Injector,
        private _m: NgModuleRef<any>) {
    }

    ngAfterViewInit() {
        const template = `<md-card class="example-card">
  <md-card-header>
    <div md-card-avatar class="example-header-image"></div>
    <md-card-title>Shiba Inu</md-card-title>
    <md-card-subtitle>Dog Breed</md-card-subtitle>
  </md-card-header>
  <img md-card-image src="assets/img/examples/shiba2.jpg">
  <md-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </md-card-content>
  <md-card-actions>
    <button md-button>LIKE</button>
    <button md-button>SHARE</button>
  </md-card-actions>
</md-card>`;

        const tmpCmp = Component({ template: template })(class {
        });
        const tmpModule = NgModule({imports:[MaterialModule], declarations: [tmpCmp] })(class {
        });

        this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
            .then((factories) => {
                const f = factories.componentFactories[0];
                const cmpRef = f.create(this._injector, [], null, this._m);
                cmpRef.instance.name = 'B component';
                this._container.insert(cmpRef.hostView);
            })
    }
}

import { NgModule } from "@angular/core";
import { OTFAComponent } from "./a.component";

@NgModule({
    declarations: [OTFAComponent],
    entryComponents: [OTFAComponent],
    exports: [OTFAComponent]
})

export class OTFModule {

}

{
  "name": "bus-vgtub",
  "version": "1.0.0",
  "description": "BUS",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
    "postinstall": "typings install"
  },
  "keywords": [],
  "author": "vgtub",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/compiler-cli": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/platform-server": "^4.1.3",
    "@angular/router": "^4.1.3",
    "@ngx-translate/core": "^6.0.0",
    "@ngx-translate/http-loader": "0.0.3",
    "angular-in-memory-web-api": "~0.2.4",
    "angular2-busy": "^2.0.4",
    "core-js": "^2.4.1",
    "ng-dynamic-component": "^1.0.8",
    "ng-pipes": "^0.1.2",
    "ng2-cookies": "^1.0.6",
    "ng2-filter-pipe": "^0.1.10",
    "ngx-loading": "^1.0.5",
    "ngx-treeview": "0.0.5",
    "rxjs": "^5.0.2",
    "systemjs": "0.19.40",
    "tslib": "^1.7.1",
    "typescript": "^2.3.4",
    "zone.js": "^0.8.11"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/lodash": "^4.14.64",
    "@types/node": "^6.0.46",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.2",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "delegated-events": "^1.0.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "html": "^1.0.0",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "linqts": "^1.8.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "ng-dynamic": "^3.0.2",
    "ngx-dynamic-template": "^2.1.24",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10",
    "typescript-collections": "^1.2.3",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-merge": "^4.1.0"
  },
  "repository": {}
}

<pre>jQuery(document).ready(function($){
	//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
	var MQL = 1170;

	//primary navigation slide-in effect
	if($(window).width() > MQL) {
		var headerHeight = $('.cd-header').height();
		$(window).on('scroll',
		{
	        previousTop: 0
	    }, 
	    function () {
		    var currentTop = $(window).scrollTop();
		    //check if user is scrolling up
		    if (currentTop < this.previousTop ) {
		    	//if scrolling up...
		    	if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
		    		$('.cd-header').addClass('is-visible');
		    	} else {
		    		$('.cd-header').removeClass('is-visible is-fixed');
		    	}
		    } else {
		    	//if scrolling down...
		    	$('.cd-header').removeClass('is-visible');
		    	if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
		    }
		    this.previousTop = currentTop;
		});
	}

	//open/close primary navigation
	$('.cd-primary-nav-trigger').on('click', function(){
		$('.cd-menu-icon').toggleClass('is-clicked'); 
		$('.cd-header').toggleClass('menu-is-open');
		
		//in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
		if( $('.cd-primary-nav').hasClass('is-visible') ) {
			$('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
				$('body').removeClass('overflow-hidden');
			});
		} else {
			$('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
				$('body').addClass('overflow-hidden');
			});	
		}
	});
});

    $('.cd-primary-nav li a').on('click', function(event){
      var href = $(this).attr('href');
      event.preventDefault;
      $('.cd-menu-icon').removeClass('is-clicked'); 
      $('.cd-header').removeClass('menu-is-open');
      $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
       $('body').removeClass('overflow-hidden');
       document.location = href;
      });
    });

<pre>	<header class="cd-header">
		<div class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></div>

		<a class="cd-primary-nav-trigger" href="#0">
			Menu
		</a> 
	</header>

	<nav>
		<ul class="cd-primary-nav">
			<li class="cd-label">About us</li>
			<li><a href="http://mysite.com">Home</a></li><pre><!-- This link will not close the menu --><pre>

<!-- This link will work fine because it's not on my domain. -->

ngOnInit(): void {

      this.activatedRoute.params.subscribe((parms: any) => {
          if (parms.lang) {
              this.loading = true;


           this.http._get(GLOBALS.url+"/api/GetPageHTML/Page2/"+parms.lang).subscribe(data => this.pageHTML = data[0]['puslHTML']);



          } else {
              this.loading = true;

            this.http._get(GLOBALS.url+"/api/GetPageHTML/Page2/"+parms.lang).subscribe(data => this.pageHTML = data[0]['puslHTML']);
               }

      });


  }

parms.lang