Angular Components

Angular 1.5 Component extensions (shims) for Patternfly web components are implemented to enhance the Angular.js experience and ease consumption in the Angular.js framework.

Angular Components require the core component dependencies mentioned in Components along with the following extension library:

npm install --save angular-patternfly-shims

Include the angular-patternfly.webcomponents.js script and then declare a dependency on the patternfly.webcomponents module:

angular.module('myModule', ['patternfly.webcomponents']);

<pf-alert type="info" ng-attr-persistent="{{isPersistent}}">
    Well done <strong>{{user.name}}</strong>! You successfully read this important alert message.
</pf-alert>

angular.module('myModule').controller('exampleController', ['$scope', function ($scope) {
    $scope.user = {name: 'John'};
    $scope.isPersistent = true;	
  }
]);

Utilization Bar Chart

The Utilization Bar Chart depicts the percentage utilization ratio between used and available.

<pf-utilization-bar-chart threshold-set="thresholdSet(event)" id="thresholdExample" chart-title="RAM Usage" used="{{used}}" total="100" units="MB" threshold-warning="60" threshold-error="85"></pf-utilization-bar-chart>

angular.module('myModule').controller('exampleController',
  ['$scope','$interval', function ($scope, $interval) {

    $scope.used = 10;

    $interval(function () {
        if ($scope.used > 100) {
            $scope.used = 10;
        } else {
            $scope.used += 10;
        }
    }, 1900);

    $scope.thresholdSet = function (e) {
        //monitor threshold here!
        var threshold = e.detail.threshold;
    };
  }
]);

<pf-tabs class="nav nav-tabs" tab-changed="tabChanged(event)">
    <pf-tab tabTitle="Cupcakes" is-active="tabOne.active">
        <p>Cupcake ipsum dolor. Sit amet topping. Jelly-o cake ice cream jujubes marshmallow cotton candy.</p>
    </pf-tab>
    <pf-tab tabTitle="Caramels" is-active="tabTwo.active">
        <p>Candy caramels sweet roll macaroon pastry cupcake liquorice. Cookie I love topping I love cookie toffee chocolate bar. Jelly-o sweet roll I love dessert powder.</p>
    </pf-tab>
</pf-tabs>

angular.module('myModule').controller('exampleController', ['$scope', function ($scope) {

    //tabs
    $scope.tabOne = {active: true, title: 'Cupcakes'};
    $scope.tabTwo = {active: false, title: 'Caramels'};

    $scope.tabChanged = function (ev) {
        alert('holy guacamole! Active tab is now: ' + ev.detail);
    };
  }
]);

<pf-tooltip id="tooltip-left" placement="left" target-selector="#btn-left">{{tooltipLeft}}</pf-tooltip>
<button id="btn-left" type="button" class="btn btn-primary btn-lg" aria-describedby="tooltip-left">Left</button>

<pf-tooltip id="tooltip-top" placement="top" target-selector="#btn-top">{{tooltipTop}}</pf-tooltip>
<button id="btn-top" type="button" class="btn btn-default btn-lg" aria-describedby="tooltip-top">Top</button>

<pf-tooltip id="tooltip-bottom" placement="bottom" target-selector="#btn-bottom">{{tooltipBottom}}</pf-tooltip>
<button id="btn-bottom" type="button" class="btn btn-warning btn-lg" aria-describedby="tooltip-bottom">Bottom</button>

<pf-tooltip id="tooltip-right" placement="right" target-selector="#btn-right">{{tooltipRight}}</pf-tooltip>
<button id="btn-right" type="button" class="btn btn-danger btn-lg" aria-describedby="tooltip-right">Right</button>

angular.module('myModule').controller('exampleController', ['$scope', function ($scope) {
    $scope.tooltipLeft = "Look Ma!";
    $scope.tooltipTop = "It still binds!";
    $scope.tooltipBottom = "Oh, that's great.";
    $scope.tooltipRight = "Must be an observer.";
  }
]);

The following app demonstrates use of Angular 1.5 with Patternfly web components.

Components List

• Alerts
• Tabs
• Tooltips
• Utilization Bar Chart

Github Project

Link to Project

Screenshot