Angular2 Components

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

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

npm install --save angular2-patternfly-shims

Add the Custom Elements schema to your @NgModule:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

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

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

@Component({
    selector: 'example',
    templateUrl: 'example.component.html',
    styleUrls: ['example.component.css']
})
export class ExampleComponent {
    constructor() {
        this.user = {name: 'John'};
        this.isPersistent = true;
    }
}

Utilization Bar Chart

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

<pf-utilization-bar-chart (thresholdSet)="thresholdSet($event)" #thresholdExample chart-title="RAM Usage" [used]="used" total="100" units="MB" threshold-warning="60" threshold-error="85"></pf-utilization-bar-chart>

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'example',
    templateUrl: 'example.component.html',
    styleUrls: ['example.component.css']
})
export class ExampleComponent implements OnInit {

    constructor() {}

    ngOnInit() {
        this.used = 10;

        setInterval(() => {
           if(this.used > 100){
               this.used = 10;
           } else {
             this.used += 10;
           }
        });
    }

    thresholdSet(event: Event){
        //monitor threshold here!
        let threshold = event.detail.threshold;
    }
}

<pf-tabs #pfTabs class="nav nav-tabs" (tabChanged)="onTabChanged($event)">
    <pf-tab tabTitle="Cupcakes">
        <p>Cupcake ipsum dolor. Sit amet topping. Jelly-o cake ice cream jujubes marshmallow cotton candy.</p>
    </pf-tab>
    <pf-tab tabTitle="Caramels">
        <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>

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'example',
    templateUrl: 'example.component.html',
    styleUrls: ['example.component.css']
})
export class ExampleComponent implements AfterViewInit {

    @ViewChild('pfTabs') pfTabs:ElementRef;

    constructor() {}

    onTabChanged(event: Event) {
        //active tab is now: event.detail
    }

    ngAfterViewInit() {
        //programmatically changes the active tab
        this.pfTabs.nativeElement.setActiveTab('Caramels');
    }
}

<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>

Import the Tooltip extension into your component's module:

import { TooltipComponent } from 'angular2-patternfly-shims/lib/Tooltip';
@NgModule({
  declarations: [
    TooltipComponent
  ]
})
export class AppModule { }

Add bindings in your component:

import { Component } from '@angular/core';
@Component({
    selector: 'example',
    templateUrl: 'example.component.html',
    styleUrls: ['example.component.css']
})
export class ExampleComponent {
    constructor() {
        this.tooltipLeft = "Look Ma!";
        this.tooltipTop = "It still binds!";
        this.tooltipBottom = "Oh, that's great.";
        this.tooltipRight = "Must be an observer.";
    }
}

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

Components List

• Tabs
• Tooltips

Github Project

Link to Project

Screenshot