<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>Angular2 + nativeElement appendChild using renderer2 example</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<!-- Angular2 + nativeElement appendChild using renderer2 example -->
<link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
Angular appendChild examples
</my-app>
<div style="position: absolute; bottom: 10px; left: 10px;">
<a style="text-decoration: none; color: #000000;" href="https://github.com/joejordanbrown" target="_blank">GitHub</a>
</div>
<div style="position: absolute; bottom: 10px; right: 10px;">
<a style="text-decoration: none; color: #000000;" href="https://uixd.co.uk" target="_blank">Created by UIXD</a>
</div>
</body>
</html>
/* Styles go here */
body {
margin: 0;
}
.container {
padding: 24px;
}
.item {
background: red;
width: 50px;
height: 50px;
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
}
.appendTo:empty {
background-color: yellow
}
.appendTo {
width: 200px;
height: 200px;
margin: 24px 0;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
### Angular Starter Plunker - Typescript
[Angular Examples by UIXD](https://uixd.co.uk)
---------------------------------------------------------
## Checkout other examples on profile:
http://plnkr.co/users/joejordanbrown
https://stackblitz.com/@joejordanbrown
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/animations': "https://unpkg.com/@angular/animations/bundles/animations.umd.js",
'@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js',
'@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js',
'@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js',
'@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js',
'@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js',
'@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js',
'@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js',
'@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js',
'@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js',
'@angular/cdk/rxjs': 'https://unpkg.com/@angular/cdk/bundles/cdk-rxjs.umd.js',
'@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js',
'@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js',
'@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, ViewChild, ElementRef, Renderer2} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { MdButtonModule, MdToolbarModule } from '@angular/material'
@Component({
selector: 'my-app',
template: `
<md-toolbar color="primary">
<h1>Angular appendChild examples</h1>
</md-toolbar>
<div class="container">
<h3>Direct DOM Manipulation using nativeElement</h3>
<button type="button" (click)="appendToChild()" md-raised-button color="primary">Append Item to Child</button>
<div class="appendTo" #appendToChildEl></div>
<h3>Using Renderer2 + nativeElement</h3>
<p>
The Renderer2 class is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly. This is the recommended approach because it then makes it easier to develop apps that can be rendered in environments that don’t have DOM access, like on the server, in a web worker or on native mobile.
</p>
<button type="button" (click)="rendererAppendToChild()" md-raised-button color="primary">Append Item to Child</button>
<div class="appendTo" #rendererAppendToChildEl></div>
<div class="item" #item>Item</div>
</div>
`,
styles: ['']
})
export class App {
@ViewChild('item') item: ElementRef;
@ViewChild('appendToChildEl') appendToChildEl: ElementRef;
@ViewChild('rendererAppendToChildEl') rendererAppendToChildEl: ElementRef;
constructor(private _renderer: Renderer2) {
}
appendToChild() {
this.appendToChildEl.nativeElement.appendChild(this.item.nativeElement);
}
rendererAppendToChild() {
this._renderer.appendChild(this.rendererAppendToChildEl.nativeElement, this.item.nativeElement);
}
}
@NgModule({
imports: [ BrowserModule, MdButtonModule, MdToolbarModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}