Angular Components

Overview

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']);

Alerts

Well done John! You successfully read this important alert message.
<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;	
  }
]);

Charts

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;
    };
  }
]);

Tabs

Cupcake ipsum dolor. Sit amet topping. Jelly-o cake ice cream jujubes marshmallow cotton candy.

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.

<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);
    };
  }
]);

Tooltips

Look Ma! It still binds! Oh, that's great! Must be an observer.
<pf-tooltip id="tooltip-left" placement="left" targetSelector="#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" targetSelector="#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" targetSelector="#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" targetSelector="#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.";
  }
]);

Demo Apps

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

Screenshot
screenshot