Angular get nested element using directive on parent -

here code have

<parent my-directive [tohide]="childref">   <child bottom right #childref>     <button>some text </button>  </child >  </parent > 

here have my-directive on parent element , want access child , apply style it.

so in directive, have following.

export class mydirective {   @input("tohide") localref;    constructor(public element:elementref,public renderer:renderer) {     console.log('hello mydirective directive');   }    ngafterviewinit() {     console.log("all transtition set");     console.log(this.localref); this.renderer.setelementstyle(this.localref, 'webkittransition', 'transform 500ms,top 500ms');   } 

as can see using this.renderer set style on element following.

error error: uncaught (in promise): typeerror: el.style undefined

any in regard appritiated.

if <child> plain html element (no component) should work (added nativeelement)

this.renderer.setelementstyle(     this.localref.nativeelement, 'webkittransition', 'transform 500ms,top 500ms'); 

if <child> angular component change line

@input("tohide") localref; 

to

@contentchild('childref', { read: elementref }) localref; 

and remove [tohide]="childref"

if element template variable plain html element, reading reference returns elementref , actual element can accessed using nativeelement property.

if component or hosts directive, reading reference returns component or directive instance can't used access dom element.

@viewchild(ren) , @contentchild(ren) allow specify return template variable reference using read parameter, accessing template variable reference within template doesn't provide that.

however i'd suggest using

@hostbinding('class.is-transition') istransition:boolean false; 

in directive , use css like

parent[host-directive] > child {   -webkit-transition: transform 500ms,top 500ms; } 

to apply styles.