How to create and use directive on Ionic?

Ionic Framework ionic-v3
1

Hello there,

Before, in Ionic v1, I had this directive to create and print a qr code image on screen:

directivesModule.directive('qrcode', function ($interpolate) {
  return {
    restrict: 'E',
    link: function ($scope, $element, $attrs) {
      var options = {
        text: '',
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: 'H'
      };

      Object.keys(options).forEach(function (key) {
        options[key] = $interpolate($attrs[key] || '')($scope) || options[key];
      });
      options.correctLevel = QRCode.CorrectLevel[options.correctLevel];
      new QRCode($element[0], options);
    }
  };
});

And in the template I used like this:
<qrcode text="{{somethingFromTheController}}" color-bright="#ff0000"></qrcode>

I need help how I can achieve something like that on Ionic v3, I am recreating the app and I did not understand how directives work.

I have created the directive already, but I don’t know how to implement my needs on it.

import { Directive } from '@angular/core';

@Directive({
  selector: '[qrcode-generator]' // Attribute selector
})
export class QrcodeGeneratorDirective {

  constructor() {
    console.log('Hello QrcodeGeneratorDirective Directive');
  }

}

Appreciate any help! Thanks!

2

http://blog.ionic.io/ionic-and-lazy-loading-pt-2/