2

One of the interesting Angular 6 new Features is Angular Elements which allows us to transform the Angular Components to native Web Components, and also be able to use them as web components everywhere e.g. use them in a React or Vue App.

The main question here is: Does this mean that, we can generate a web component and then use it in a totally different App which is not Angular, not React and not Vue? In other words: Can I then generate a native web Component with Angular Elements and use it in a project build with/on HTML5, native JavaScript/jQuery, CSS etc.

For instance, If I do have an Angular App Component and I would like to take its generated Code (design, functionality, Style formatting etc.) to use in a different Project (not an Angular Project) build with bootstrap, jQuery etc., would this be possible?

I have been reading this question and its answers, but to be honest, I'm not 100% sure about the exact goal and target of Angular Elements feature as it's more or less a question about the technical concept of Angular Elements

Other point would also be interesting to know: What about if my Angular App uses Angular Material? Would Material stuff also be available within the generated native web app, so that they can use everywhere?

k.vincent
  • 3,743
  • 8
  • 37
  • 74
  • I don't think that it really makes sense, if users can vote to close questions without giving any reason(s) or argument. Actually such action (vote to close), should have a mandatory field to leave a comment regarding the reason why a question should be closed! Would be helpful and make sense to let the author knows what's wrong with the Question/Topic! – k.vincent May 11 '18 at 11:01
  • To answer the first question, yes, I think this is the exact purpose of elements. I found this practical guide https://nitayneeman.com/posts/a-practical-guide-to-angular-elements/ the explains how to make a simple component *made-with-love* which is a standard component you would right in Angular. From the article : "Angular Elements of v6 are aimed at using inside Angular applications. Angular Elements of v7 will be more standalone and embeddable inside any external applications." PS It was not me that voted to close. – rjdkolb May 11 '18 at 11:13
  • @rjdkolb: Yes, I see... good one. Regarding voting to close a question, I would suggest that this option should have a mandatory field to argue and give a reason why a question should be closed, and after that the vote should be approved with a last step: accepted/rejected. I have been reading some questions which were not really out of topic or wrong... sometimes it just depends on the point of view etc. – k.vincent May 11 '18 at 12:35

1 Answers1

2

Does this mean that, we can generate a web component and then use it in a totally different App which is not Angular, not React and not Vue? In other words: Can I then generate a native web Component with Angular Elements and use it in a project build with/on HTML5, native JavaScript/jQuery, CSS etc.

To answer the first question, yes (see caveat below), this is the exact purpose of elements. I found this practical guide the explains how to make a simple component made-with-love which is a standard component you would right in Angular.

A big caveat from the article conclusion :

Angular Elements of v6 are aimed at using inside Angular applications.

Angular Elements of v7 will be more standalone and embeddable inside any external applications.

There is also a nifty video showing how to use Firebase in your element and use it in a plain HTML website. So,yes I think your Angular Material will be exposed in the exported element.

Community
  • 1
  • 1
rjdkolb
  • 10,377
  • 11
  • 69
  • 89