Angular 2.0 support

[wesleycho]

With Angular 2 on the horizon, we should start considering the path to migration.

Do we want to support a smoother transition with similar API to the current UI Bootstrap, or should we reimagine the api if they are too hairy or not ideal to support?

This issue is open to comment.

[chrisirhc]

From what I see so far of Angular 2, it seems that creating the tooltip and modal directives would be challenging. This might be because the Angular 2 API is still in early stages.

[wesleycho]

https://github.com/angular/angular/commit/2041860a21c021efc10589533f23c8df6dc611d3 was added recently in support of dynamic loading of components, so it should be possible to do so programmatically.

[BobbieBarker]

I think we should drop the current API, the API on this project is my least favorite aspect of the project over all. I think projects like angular-strap expose a more more expressive/flexible/versatile API. I don't say that to suggest that we should mimmick that project in any way shape or form, only that there is room for improvement.

[wesleycho]

My team ended up strongly disliking angular-strap when we used it at my current company - some of the API was not well thought out at all such as for modals.

I am personally leaning towards a new set of API, since I suspect most companies will move towards a big bang upgrade or migrate from a different framework if they move to Angular 2, but I understand some will want a more gentler upgrade path. Even then, there are mini refactors people will have to do and fully convert their components to Angular 2 from Angular 1, and so adding refactoring to a better set of API would ease the migration pains IMO. I don't feel strongly about this stance though, and could be convinced this is the wrong path with a better argument.

To give some context to UI Bootstrap - it was originally conceived as a project that had some useful common enough components from what I understand if I remember what @pkozlowski-opensource has said in the past. It was not meant to mirror Twitter Bootstrap's js-based components in a 1:1 fashion.

[BobbieBarker]

I think the core idea i was trying to communicate is we should be open to reinventing the API where it makes sense. We shouldn't box ourselves into supporting an API from 1.* if it doesn't make sense to do so. We should keep our options open.

[laguiz]

I would opt for free design (as Angular team did) and then figure out how to make the migration (manually done by users of the lib or with some temporary helpers)

[bradlygreen]

Sentiment I'm hearing from folks is that they would love API-compatible libraries that "just work" in Angular 2 to minimize porting effort.

We're doing this with $http, animations, ComponentRouter, and maybe more.

I know this a) isn't really possible for directives and b) constrains you on improving APIs as expressed in the sentiment in this thread. Still, something to consider in making it easy for folks to migrate...

As far as things that may be hard to achieve like overlays (tooltips, pop-ups, modals, etc.), we have some designs on this internally that we could share that may help on this and in other UI areas. Just let me know.

[pkozlowski-opensource]

@bradlygreen - interesting - we had exactly this dissuasion back at the Amadeus office :-) I will ping you / @naomiblack to see how we could find synergies on ng2 directives for BS. We would be willing to put some effort in this area.

[wesleycho]

Linking this migration strategy document for reference - this will provide a potential technical solution for this issue if implemented.

[valorkin]

https://github.com/valor-software/ng2-bootstrap welcome on board if you wish :)

[bradlygreen]

We announced this today: http://angularjs.blogspot.com/2015/08/angular-1-and-angular-2-coexistence.html

Please let us know what you guys need to be successful in porting to Angular 2!

BTW, Jeremy Elbourn on our team will be giving a talk on "well behaved Angular 2 components" at AngularConnect with many helpful guidelines for success.

[valorkin]

Awesome post BTW If nothing will change, this weekend I will submit PR to ng2 with fixes to TS d.ts, because it drives me crazy some times (wall of warnings at ts build time)

@bradlygreen, other thing I really looking for and will appreciate is any note, peace of code, sample (at least something) is a way from html in string to render html binded to given context (like $parse, $interpolate, $compile in ng1). The top most explanation I have found is some tests in ng2:)

Thanks in advance

[wesleycho]

Please do not pollute the issue with comments unrelated to the issue at hand @valorkin.

@bradlygreen I think we'll be fine when we are ready to make the move to migrate :) . At the very least, I'm sure @pkozlowski-opensource probably knows more about the details of the migration story from 1 to 2 than most of us.

[laurentgoudet]

IMHO I think the current UI Bootstrap API does not fit at all the new component oriented paradigm, i.e. a modal should be defined (declaratively) in the view as:

<ui-modal [open]="showModal" animation="enabled" size="large">
  <signup-form (success)="..">...</signup-form>
</ui-modal>

Rather than created (imperatively) from the view controller:

    var modalInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

Looks a bit like React, but first one encourages isolation & reusability by providing a clear interface based on events & properties.

[wesleycho]

@laurentgoudet we are still experimenting on what may work best with ng2. I will link the repository we are operating out of when the details are solidified (should be in the next week or two) so API discussion can happen in an issue there.

[Foxandxss]

It's a kind of magic.

[viktor-evdokimov]

@wesleycho do you guys have new repo for ng2 ?

[icfantv]

Yes, we do. But it's not even remotely close to being ready. There were way too many changes in ng2 prior to beta for us to make any substantial progress on it. There are ongoing changes in beta as well that need to be accounted for so we don't have any time frame for release as we want to get it right. It's called ng-bootstrap and is located here.

Just a note again that it is under active development and thus no issues filed will probably be valid.

[viktor-evdokimov]

Thanks, Adam

[ChaosCrafter]

I've no history in this, so little right to comment, but I'd suggest a new approach to allow the best possible interface, and then consider an intermediate/translation library to allow legacy apps to add the library and make only minimal changes.

[icfantv]

@chaoscrafter, we have an ng2 version started but we are currently waiting on the angular team to implement some features before we can properly implement many of the components. The link is available in our readme but it has nothing released yet.

[naveedahmed1]

Is there any update on Angular UI for Angular 2?

[Foxandxss]

We are working hard on it. We are trying to build it up as well as we try to make angular 2 a better place for everyone.

Sorry for being late, but it will worth it.

[icfantv]

@naveedahmed1, yes, we have a new github project set up under the name ng-bootstrap. You will find everything there, but I will say that the code is not even alpha yet. We have however had quite a bit of momentum in the past few weeks.

[naveedahmed1]

Glad to know that! Is there any timeline that we can follow and plan accordingly?

[icfantv]

@naveedahmed1, no. not as such. we're all unpaid volunteers here so we're working as best we can. we also have to maintain this repo at the same time. i would just keep checking in.

[wesleycho]

Alternatively, keep an eye on https://github.com/ng-bootstrap/core - that is the repository for the ng2 version, and we're working on initial docs and getting an initial release within the next few weeks.

[pkcinna]

Not seeing any activity with repo mentioned above regarding docs and initial release. How is this project related to the version at https://github.com/valor-software/ng2-bootstrap? Regardless of the history of the projects, it is important for the community to know the status and commitments.

[icfantv]

@pkcinna not exactly sure what you're looking at, but we're making good progress. the hold up has been waiting on some critical ng2 fixes from the angular core team but we have a path forward on that front. it is important to us to not just deliver a solid and working library but also one that is flexible and maintainable so that we're able to respond to the community's needs (including yours).

we are unrelated to that project and there are some fundamental differences between the two projects in both FOSS philosophy and the library implementation.

[pkcinna]

Thanks. Regarding the library implementation and future maintainability, can you mention a few key advantages of waiting on this project? I know this is slightly off topic but still related to angular 2.0 compatibility and release date.

[pkozlowski-opensource]

@pkcinna we are going to provide a WIKI page with the communication on this (advantages, road map). But don't expect us to commit to any date.

[marcalj]

@icfantv Can you elaborate more about "some critical ng2 fixes from the angular core team"? Are they fixed in RC2 or are still missing? We can start implementing popovers or modals without it?

Thanks!

[pkozlowski-opensource]

@marcalj I've just flagged items blocked on ng2 issues: https://github.com/ng-bootstrap/core/issues?q=is%3Aissue+is%3Aopen+label%3A%22blocked%3A+ng2+issue%22

We can start implementing popovers or modals without it?

I've got parts of the impl but it can't be finished before the mentioned ng2 issues are sorted out.

In any case we want to release the first version soon, even if few directives are missing.

[marcalj]

Thanks! I'm just want to know about the current issues to implement the missing directives/components. As I need to use Bootstrap v3 I'll use ng2-bootstrap in the meantime.

I suppose the missing parts from Angular core is this pull request: https://github.com/angular/angular/pull/9393

[pkozlowski-opensource]

For anyone tracking this issue: we've just released support for Angular 2, see: https://ng-bootstrap.github.io

[timgautier]

I have a large angular 1/4 hybrid app that I'm slowly upgrading to angular 4. It seems that in order to only upgrade some components that are using angular-ui bootstrap, I have to have both angular-ui bootstrap and ng-bootstrap installed, and since ng-bootstrap is based on bootstrap 4, I also have to use both bootstrap 3 and 4 at the same time. Is that really the case?

[icfantv]

@timgautier yes. and i will save you the pain of testing out ways to embed BS4 CSS into Angular components, it doesn't work. I was able to create Angular @Directives for ui-select, but we never found a way forward with the route you're taking.

Depending on your timeline, I would first identify which UIBS components you are using and then determine which are upgradable to BS4. There's an issue that tracked this indicating that migrating UIBS to BS4 shouldn't be TOO hard, but we never tried it.

The way I see it, you have several paths forward (in no particular order):

• Convert your UIBS library to BS4 which allows you to use ng-bootstrap
• Identify the UIBS components you use and contribute BS3 versions to the ng-bootstrap project
• Use another Bootstrap UI library that supports both 3 and 4. There is one that exists, but I will not link to it here for a myriad of reasons/issues that I will not get into publicly but am happy to share with you privately.
• Rewrite your app from scratch in Angular and don't use AngularJS.

The upgrade route is not for the feint of heart and having attempted it twice now, I can tell you, it may not be a viable one - for reasons not solely because of Angular. We abandoned it for React as it is a well-paved road for doing drop-in "web components" in an AngularJS application.