import { Component, ViewChild, ElementRef, AfterContentInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div #target class="parent">
<div class="child">
</div>
</div>
`
})
export class AppComponent implements AfterContentInit {
@ViewChild('target') elementRef: ElementRef;
ngAfterContentInit(): void {
var child = this.elementRef.nativeElement.querySelector('div');
console.log(child);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Hello Angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {color:#369;font-family: Arial,Helvetica,sans-serif;}
</style>
<!-- Polyfills for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
<script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
<script> window.autoBootstrap = true; </script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->