Angular 1 directive inside angular 2 application
<p>We created an Angular 2 application using this awesome <a href="https://github.com/mgechev/angular2-seed" rel="nofollow">Angular2 Seed</a> which works very well. So the question that I have is, how can I upgrade this Angular 1 directive:</p>

<pre><code>import template from './sbgOutlineButton.html!text';

var app = angular.module('sbgOutlineButton', []);

app.directive('sbgOutlineButton', function() {
    let link = function(scope, element, attributes) {
        if (attributes.icon === undefined) {
            let materialIcon = element.find('i.material-icons');
            materialIcon.addClass('hidden');
        }

    };

    return {
        link: link,
        restrict: 'E',
        template: template,
        replace: true,
        transclude: true,
        scope: { icon: '@' }
    };
});

export default app;
</code></pre>

<p>So that I can use it in the following Angular 2 component:</p>

<pre><code>import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { UpgradeAdapter } from '@angular/upgrade';

@Component({
    moduleId: module.id,
    selector: 'test-page',
    templateUrl: 'testpage.page.html',
    styleUrls: ['testpage.page.css']
})
export class TestPage implements OnInit {
    constructor() { }
    ngOnInit() { }
}
</code></pre>

<p>Do you guys maybe have any idea on how I will be able to accomplish this? Is it even possible? Because a lot of the other articles that I have found during my research suggests that your "base" application should be Angular 1...</p>

<p>Thanks in advance.
Francois</p>