html - Insert any element from script in an element Angular 2 -
i have problem insert element in element <my-app>(angular 2). need @ first element <div class="render"></div> jquery in <script> (look @ code html) need write in <div class="render"></div> information (for example <h1> hello </h1> (look @ html code) ). when app run code must write in <div class="render"></div>. not happen because on moment start <div class="render"></div> not exist. if set settimeout it's working (because <div class="render"></div> in time appear on page). please may decide problem? p.s. jquery , angular 2 in 1 app not correctly know me need decide problem.
html code.
<!doctype html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> </head> <body> <my-app>loading...</my-app> <script> //there's try element '.render' $(document).ready(function(){ $("#render").html('<h1> hello </h1>'); }); </script> </body> </html> angular 2 app.component.html
<div class="content"> <div class="container"> <side-bar-left></side-bar-left> <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12paddingmiddle"> <div id="divsidebarright"> <div class="render"> </div> </div> </div> </div> </div>
don't try , access element .html file. inside of component using afterviewinit life cycle hook.
import {afterviewinit} '@angular/core' add class declaration
class implements afterviewinit then use jquery in function
ngafterviewinit (){ // jquery here } 
Comments
Post a Comment