Search code examples
angularweb-component

Angular 6 - what is the exact and main goal of Angular Elements feature?


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?


Solution

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