Support for Angular 2

[kahboom]

Hey PatternFly folk! I'm a fellow Red Hatter from the apiman and iPaaS teams. For the iPaaS project we are collaborating with UXD for designs and would like to use PatternFly, but are running into some compatibility issues with the frontend stack, which consists of Angular 2 and Webpack.

Stan Lewis (@gashcrumb) proposed that we collaborate and help work on angular2-patternfly so that we don't have to use jQuery libraries directly to be able to take advantage of all the lovely features of PF. At the moment, we are setting up with C3 by using jQuery directly in the components/controllers and handling DOM changes from there, but that's obviously not ideal. So, I have a few questions:

1. I'd like to know how to properly use our stack with PatternFly, or what the right steps toward making them compatible would be? What would that entail? We'd need quite a few things down the road like data visualization using C3. We may need things like bootstrap-select, a datepicker, and other utilities that were often provided by AngularUI. We can also create these components for Angular 2 independently of PF, but figured why not hit two birds with one stone.
2. Is something like this already being worked on?
3. Would working on an Angular 2-compatible version of PF take a long time?

Thanks in advance!

Rachel

[mtho11]

+1 I know I have asked this same question toward the beginning of the year on irc with no response (probably, the right person wasn't online). Every new project will most likely choose Angular 2 over Angular 1 so probably best to get ahead of this now.

This was the primary reason we could not move Hawkular toward Angular 2, was PatternFly. I'm guessing PatternFly will be the blocker for other projects as well.

[serenamarie125]

There have been a lot of requests for Angular2 PF support. I think that @bleathem @andresgalante and @LHinson are meeting later this month to discuss the official PF strategy going forward.

[kahboom]

Thanks @serenamarie125. As previously discussed with @priley86 and @andresgalante , I am having to use ng-bootstrap in conjunction with PF CSS for our project (iPaaS), since ng-bootstrap already uses Webpack, Angular 2, and Bootstrap 4. So, that might be helpful to use instead of angular-ui-bootstrap if you are indeed interested in upgrading to Angular 2.

Of course, that may be easier said than done. I haven't taken a deep dive into the code to know how much change that would require. I also have no idea how that would work since the latest version of PF doesn't support Bootstrap 4, so that might be the first step. It's difficult considering there are many moving parts to keep up with. Should you guys decide to go in that direction though, I'd be happy to help with the Angular 1 -> 2 upgrade, but would be pretty useless at upgrading Bootstrap 3 -> 4. Just give me a holler! :)

[kbrandwijk]

Hi, I'm currently working on a port to Angular 2, but I'm facing some design decisions. Currently I have one big choice to make, and I appreciate any input you might have. Let's take the Card as an example. Angular-patternfly uses the approach of making everything a parameter to the directive (e.g. title, filter options etc.). The DOM is all in the template, combined with some logic in the directive itself. <div pf-card title='...' filter='...'>Body of the card</div>

On the other hand I'm looking at the way angular-material implemented their card. They have a directive for it, which doesn't contain any logic worth mentioning. They solve it all by their stylesheets, effectively creating tags that only exist in CSS.

<md-card>
   <img src="card-image.png" class="md-card-image" alt="image caption">
   <md-card-content>
     <h2>Card headline</h2>
     <p>Card content</p>
   </md-card-content>
   <md-card-footer>
     Card footer
   </md-card-footer>
</md-card>

Then, there's a third choice, which makes every part of the card it's own component (title, body, footer), allowing for additional logic in every component, combined with content projection.

<pf-card show-top-border="true">
  <pf-card-title>
     This is the title
     <pf-card-filter align="right">
        <pf-card-filter-option *ngFor="item in optionsList">{{item.value</pf-card-filter-option>
     </pf-card-filter>
  </pf-card-title>
  <pf-card-body>
      This is the body
  </pf-card-body>
  <pf-card-footer>
      This is the footer, if you put the pf-card-filter here, it would 'just' work
  </pf-card-footer>
</pf-card>

As a bonus, I'd like to add something to any option, which is passing the entire configuration as a JSON object.

<pf-card configuration='{{somejsonobject}}'></pf-card>

{ header: { title: 'Title', filter: { options: [{ key: 'abc', value: 'First Option'}, ...], position: 'right' } },
  footer: { .... } }

For me, option 1 (the current implementation) is too limited in terms of declarative syntax, to me it seems most suited to use from the controller. Personally, I hate having to use attributes for everything. Option 2 is nice, I've worked with it a lot, but you can't do everything with CSS classes alone. Option 3 makes the most sense to me, starting out with CSS classes, and turning elements into a component when additional logic is needed.

What do you guys think? I'll cook something up and link to it here.

Oh, and of course all of that can be based on Bootstrap 4.

[abkieling]

Hi, everyone! I'm also a fellow Red Hatter from the Fuse team. Is there any news on PatternFly's plans regarding Angular 2? Should it be used on Angular 2 apps at this point?

[kabir]

+1 - I also work for Red Hat and would like to use PatternFly with an existing Angular 2 app. I am not yet familiar with PatternFly, and so am unsure if I should wait for support, or if it is worth poking around in the meantime.

[ceefour]

Patternfly angular 2 should use https://cli.angular.io and get it's best practices (Webpack, TypeScript, among others).

[klinki]

Are there any news on this?

Our team is using both patternfly and angular 2 and we might help, since we are already writing some generic UI components.

[gashcrumb]

There's a quickstart here that shows using the 4.x beta version of angular-patternfly in an angular 2 app, am currently giving this approach a try myself, hoping this can fill the gap until there's native or web components available.

[dtaylor113]

Hi, Recently we converted all of angular-patternfly directives to angular 1.5 components; which can now be used in Angular 2's 'hybrid' mode -where you load angular 1 & 2 in the same app using the UpgradeAdapter:

https://github.com/patternfly/angular-patternfly/releases/tag/v4.0.0-alpha.2 https://angular.io/docs/ts/latest/guide/upgrade.html

Our longer term plans include converting patternfly components to Web Components so that they can be used in any Javascript framework (Angular 2, React, Ember, etc..)

https://github.com/patternfly-webcomponents

We are curious if there is any demand to port angular-patternfly components to straight Angular 2 components.

Thanks,

• Dave Taylor

[dtaylor113]

Here is a link to a demo app. which uses angular-patternfly 1.5 components in an angular 2 app:

https://github.com/patternfly/patternfly-angular2-demo-app

[kahboom]

Just an update: Some core members from the angular-patternfly team have kindly agreed to meet with me early next week to discuss the roadmap. My hope is that we can also discuss how everyone can actively contribute to this effort to make this happen as soon as possible, as it's a high priority for many PatternFly users. Looking forward to collaborating with @bleathem and the angular-patternfly team! :) 👍

[LHinson]

Thanks for updating this issue @kahboom. Going to close out this issue since we have addressed this by starting an Angular 2 Repo.

Adding some relevant links though for others to catch up on all the latest (if you haven't already):

• Blog introducing Angular 2 and React Repos: https://blog.patternfly.org/patternfly-angular-2-and-react-repos/
• Web Components and Native Framework Proposal: https://gist.github.com/bleathem/59bcdfaaac0c347d59665762745ed674

Please check out https://github.com/patternfly/patternfly-ng/issues to see a list of current issues and questions. You can also join the conversation on slack: https://slack.patternfly.org/