JavaScript

input as dtae field,edit and delete buttons.output as a table format in the same page.When we press edit the date will come to the datefield and submit button become as update.when we press update new date has to come in the output.for each and every row the same format has to work?How by using 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