In Angular 2, is it possible to fadeIn / fadeout instead of [hidden='xxx]?

Question

In Angular 2, is it possible to fadeIn / fadeout instead of [hidden=\'xxx]?

I have snippet of

and wa

Answer 1

after some digging found the answer, you need to use the Browser Adapter interface in ng2

import {Component, ViewContainerRef} from 'angular2/core';
import {BrowserDomAdapter} from 'angular2/platform/browser';

export class Filemenu {


   private visible:boolean;
    el:any;
    wrapper:any;
    bar:any;
    viewContainer:ViewContainerRef;
    dom = new BrowserDomAdapter();

    constructor(viewContainer:ViewContainerRef) {
        this.viewContainer = viewContainer;
        this.el = viewContainer.element.nativeElement;
        let bar = this.dom.getElementsByTagName(this.el, 'div')[0];
        $(bar).fadeOut(3000, () => {
            //notify ng2 of the changes so we comply with the framework
             this.dom.setStyle(this.el, 'opacity', '0');
        });
         ...

and how cool is that, we can still use jQuery as long as we remember to notify the framework of our changes...

hope it helps others.

regards

Sean