Take an early look at Angular Elements by building a component that can be embedded into any web app as a custom element https://angularfirebase.com/lessons/angular-elements-quick-start-guide/

I'll randomly give out some swag on Friday. Just leave a comment :)

- Docs (Angular 6) - https://next.angular.io/guide/elements
- Rob Wormald's Talk https://youtu.be/Z1gLFPLVJjY
2024-02-04T07:36:54.248Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
06fe46c4-0bc7-46ee-a6d7-75814a55e5b8
77272b0090a74a12492bfbaabaf61e60aa8249e5d694e7208d5b640d2811bf56
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Today, we'll take an early look at elements, which I think is a total game changer for the Angular ecosystem.
In this episode, you'll learn how to build a regular Angular component and then export it to be used outside of an Angular app.
And, just for fun, we'll throw Firebase in the mix so we have a real time persistent back end in our component as well.
Then I'll give you a script tag so you can embed this component in any web application whether that be WordPress, Ruby on Rails, React app, Vue, whatever you want.
If you're new here make sure to subscribe and leave a comment because I'll be giving away some free swag at the end of the week.
Before we get started here, I would recommend watching Rob's talk at ngcomp to get a better idea of how Angular Elements work.
But the basic idea is that we can build an Angular component and then use it outside of an actual Angular app.
What we're going to build today is this user poll component, which I have deployed to angularfirebase.com, which is just a static HTML site.
And I've even uploaded the code to a Firebase storage bucket, so you can use this component in your own web app by simply adding these two lines of code anywhere in your HTML.
And one last thing to mention is that as of this video, at the end of April 2018, Angular Angular 6 hasn't officially been released yet, so you can expect things to change in the near future.
Let's go ahead and get started by generating a new Angular app with the CLI, and then we'll install Angular Elements, and we wanna make sure that we have Angular version 6 in package JSON.
Then for browser compatibility, we also need to install some polyfills, and we can get those from the web components monorepo.
Then go into polyfills ts and import the custom elements polyfills.
And just FYI, you can copy and paste all this code from the main lesson link in the video description.
The other thing we need to do is install Firebase and AngularFire 2, and then we'll go ahead and generate our component, which I'm calling user pull.
Before we actually build the component, I want to show you how to convert it to a custom element using Angular Elements.
To do that, we'll go into our app module.
And first, we'll bring in our dependencies, which in this case is AngularFire 2.
And you should notice the user pull component is already in the declarations from the from the CLI.
From there, we'll go ahead and import injector from Angular core and also create custom element from Angular Elements.
Then because this component is not declared in the HTML and it's not used by the router, we need to add it to the entry components array.
Then we'll go down to the AppModule class and first add the injector to the constructor.
Then we'll implement the ng do bootstrap method.
Normally, Angular bootstraps automatically, so we don't have to worry about it.
But in this case, we need to bootstrap manually.
The next thing we'll do is pass our Angular component to the create custom element method.
This method serves as a bridge that will convert the Angular component to a custom element that works with native DOM APIs.
And the final step is to register it by calling custom elements define and then give it a name and pass in the element that we just created.
At this point, we should now be able to use this component outside of the main app root where our Angular components normally live.
In fact, you may have noticed I removed the app component so we can just get rid of everything in index HTML and just add our custom element there as the single component for this app.
Run ng serve, and you should see the default component displayed in your browser.
So that's a working custom element, but we still wanna have this component do something cool, and we also wanna be able to export it and use it in production outside of Angular altogether.
Basically, we just want the user to send a yes no fonts, and then we'll record that in the Firestore database and display the results.
So here we are in the user pull component, and one important thing we're doing is using view encapsulation native.
This will encapsulate all of our CSS styles in the Shadow DOM, which is important for Angular elements because that means all of our CSS will get compiled down to JavaScript.
Otherwise, it would get compiled down to plain CSS, which means we would have to import both the CSS and the JavaScript together to use this outside of Angular.
From here, we'll set up a couple properties on the component just to manage the state.
We'll have some yes votes, some no votes, and then we'll have a has voted Boolean flag.
And we will also have a reference to the Angular Firestore document in the database.
Then I'll go ahead and import Angular Firestore in the constructor.
As of this video, you might see an error with Firestore timestamps.
If you see this error, you can fix it by adjusting your Firestore settings to have timestamps in snapshot set to true.
The next thing I'll do is in NG on init is reference a document in the Firestore database specifically for keeping track of the yes, no votes from this component.
We also want to subscribe to the data in that component, which we can do with value changes, and it will contain the total number of yes and no votes that have been recorded.
Because this is an observable, we can pipe in the tap operator, and then we'll set our yes and no properties based on that document data.
So that handles the data retrieval.
The next thing we'll wanna do is set up an event handler for when the user clicks the button to update the vote count.
We will also set this has voted boolean to true, and when that happens, we'll go ahead and show the results and take away the buttons from the element.
And then the last thing I'll do is set up some percentages here just so we can show the total ratio of vote counts and also use that to show a progress bar indicator.
Now we can switch over to the component HTML.
We'll finish building this out just like we would with any other Angular component.
We'll use n g f to show some buttons that the user has not voted.
Otherwise, if the user has voted, then we'll show the progress bar with the total vote counts that we have stored in Firestore.
I think the key takeaway here is that we're building an Angular component just like we would normally.
We're not really doing anything special for Angular elements except for maybe that Vue CSS encapsulation.
And even that part's optional.
At this point, we have a working component, but you might be asking yourself, how do we actually get it's out of Angular, so we can use it somewhere else.
Our production build looks something like this.
We have about 5 or 6 files in here.
So how do we combine all these to use them as a single script tag?
Now I should point out the Angular CLI is probably going to do this with a single command in the future, but I don't really feel like waiting for the future, so I'm just gonna show you how to do it now.
First, let's install a couple of NPM packages to make life a little easier, file system extra, and concat.
Then create a file called build script dotjs in the root of your project.
Basically, all this file is going to do is grab the 3 JavaScript files that Angular builds for production and then concatenate them into a single file.
That will include our inline polyfills and main bundle files.
And make sure that you use them in that order.
From there, we'll create a directory called elements in our project.
Then we'll save the final output in that directory as a file called user poll dotjs.
Now we just need to put this together in an npm script so we can run it from the command line.
I will call this command build colon elements.
First, it will need to run our regular Angular production build, but we'll also set the output hashing to false.
Then after the build is done, we'll go ahead and run our build script that we just wrote with Node.
Js.
If we run it from the command line, you'll see it creates this Elements directory.
And if we go in there, there's a single JavaScript file that we can use in any external web app.
For example, I set up this demo directory, and if we go into the HTML file, we just put the user pull element in the HTML body and then the script tag right after it.
It's still very early to use elements, but this opens up a whole new world of opportunity for Angular developers.
I'm gonna go and wrap things up there.
If this video helped you, please like and subscribe.
And if you're serious about building apps on the Angular Firebase stack, consider becoming a pro member we're at angularfirebase.com.
You'll get access to all kinds of exclusive resources designed to help you build and ship your product sooner.
Thanks for watching and I'll see you soon.

Speaker 0: Today, we'll take an early look at elements, which I think is a total game changer for the Angular ecosystem. In this episode, you'll learn how to build a regular Angular component and then export it to be used outside of an Angular app. And, just for fun, we'll throw Firebase in the mix so we have a real time persistent back end in our component as well. Then I'll give you a script tag so you can embed this component in any web application whether that be WordPress, Ruby on Rails, React app, Vue, whatever you want. If you're new here make sure to subscribe and leave a comment because I'll be giving away some free swag at the end of the week.

Before we get started here, I would recommend watching Rob's talk at ngcomp to get a better idea of how Angular Elements work. But the basic idea is that we can build an Angular component and then use it outside of an actual Angular app. What we're going to build today is this user poll component, which I have deployed to angularfirebase.com, which is just a static HTML site. And I've even uploaded the code to a Firebase storage bucket, so you can use this component in your own web app by simply adding these two lines of code anywhere in your HTML. And one last thing to mention is that as of this video, at the end of April 2018, Angular Angular 6 hasn't officially been released yet, so you can expect things to change in the near future.

Let's go ahead and get started by generating a new Angular app with the CLI, and then we'll install Angular Elements, and we wanna make sure that we have Angular version 6 in package JSON. Then for browser compatibility, we also need to install some polyfills, and we can get those from the web components monorepo. Then go into polyfills ts and import the custom elements polyfills. And just FYI, you can copy and paste all this code from the main lesson link in the video description. The other thing we need to do is install Firebase and AngularFire 2, and then we'll go ahead and generate our component, which I'm calling user pull.

Before we actually build the component, I want to show you how to convert it to a custom element using Angular Elements. To do that, we'll go into our app module. And first, we'll bring in our dependencies, which in this case is AngularFire 2. And you should notice the user pull component is already in the declarations from the from the CLI. From there, we'll go ahead and import injector from Angular core and also create custom element from Angular Elements.

Then because this component is not declared in the HTML and it's not used by the router, we need to add it to the entry components array. Then we'll go down to the AppModule class and first add the injector to the constructor. Then we'll implement the ng do bootstrap method. Normally, Angular bootstraps automatically, so we don't have to worry about it. But in this case, we need to bootstrap manually.

The next thing we'll do is pass our Angular component to the create custom element method. This method serves as a bridge that will convert the Angular component to a custom element that works with native DOM APIs. And the final step is to register it by calling custom elements define and then give it a name and pass in the element that we just created. At this point, we should now be able to use this component outside of the main app root where our Angular components normally live. In fact, you may have noticed I removed the app component so we can just get rid of everything in index HTML and just add our custom element there as the single component for this app.

Run ng serve, and you should see the default component displayed in your browser. So that's a working custom element, but we still wanna have this component do something cool, and we also wanna be able to export it and use it in production outside of Angular altogether. Basically, we just want the user to send a yes no fonts, and then we'll record that in the Firestore database and display the results. So here we are in the user pull component, and one important thing we're doing is using view encapsulation native. This will encapsulate all of our CSS styles in the Shadow DOM, which is important for Angular elements because that means all of our CSS will get compiled down to JavaScript.

Otherwise, it would get compiled down to plain CSS, which means we would have to import both the CSS and the JavaScript together to use this outside of Angular. From here, we'll set up a couple properties on the component just to manage the state. We'll have some yes votes, some no votes, and then we'll have a has voted Boolean flag. And we will also have a reference to the Angular Firestore document in the database. Then I'll go ahead and import Angular Firestore in the constructor.

As of this video, you might see an error with Firestore timestamps. If you see this error, you can fix it by adjusting your Firestore settings to have timestamps in snapshot set to true. The next thing I'll do is in NG on init is reference a document in the Firestore database specifically for keeping track of the yes, no votes from this component. We also want to subscribe to the data in that component, which we can do with value changes, and it will contain the total number of yes and no votes that have been recorded. Because this is an observable, we can pipe in the tap operator, and then we'll set our yes and no properties based on that document data.

So that handles the data retrieval. The next thing we'll wanna do is set up an event handler for when the user clicks the button to update the vote count. We will also set this has voted boolean to true, and when that happens, we'll go ahead and show the results and take away the buttons from the element. And then the last thing I'll do is set up some percentages here just so we can show the total ratio of vote counts and also use that to show a progress bar indicator. Now we can switch over to the component HTML.

We'll finish building this out just like we would with any other Angular component. We'll use n g f to show some buttons that the user has not voted. Otherwise, if the user has voted, then we'll show the progress bar with the total vote counts that we have stored in Firestore. I think the key takeaway here is that we're building an Angular component just like we would normally. We're not really doing anything special for Angular elements except for maybe that Vue CSS encapsulation.

And even that part's optional. At this point, we have a working component, but you might be asking yourself, how do we actually get it's out of Angular, so we can use it somewhere else. Our production build looks something like this. We have about 5 or 6 files in here. So how do we combine all these to use them as a single script tag?

Now I should point out the Angular CLI is probably going to do this with a single command in the future, but I don't really feel like waiting for the future, so I'm just gonna show you how to do it now. First, let's install a couple of NPM packages to make life a little easier, file system extra, and concat. Then create a file called build script dotjs in the root of your project. Basically, all this file is going to do is grab the 3 JavaScript files that Angular builds for production and then concatenate them into a single file. That will include our inline polyfills and main bundle files.

And make sure that you use them in that order. From there, we'll create a directory called elements in our project. Then we'll save the final output in that directory as a file called user poll dotjs. Now we just need to put this together in an npm script so we can run it from the command line. I will call this command build colon elements.

First, it will need to run our regular Angular production build, but we'll also set the output hashing to false. Then after the build is done, we'll go ahead and run our build script that we just wrote with Node. Js. If we run it from the command line, you'll see it creates this Elements directory. And if we go in there, there's a single JavaScript file that we can use in any external web app.

For example, I set up this demo directory, and if we go into the HTML file, we just put the user pull element in the HTML body and then the script tag right after it. It's still very early to use elements, but this opens up a whole new world of opportunity for Angular developers. I'm gonna go and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building apps on the Angular Firebase stack, consider becoming a pro member we're at angularfirebase.com.

You'll get access to all kinds of exclusive resources designed to help you build and ship your product sooner. Thanks for watching and I'll see you soon.
Today, we'll take an early look at elements, which I think is a total game changer for the Angular ecosystem. In this episode, you'll learn how to build a regular Angular component and then export it to be used outside of an Angular app. And, just for fun, we'll throw Firebase in the mix so we have a real time persistent back end in our component as well.
animation
Then I'll give you a script tag so you can embed this component in any web application whether that be WordPress, Ruby on Rails, React app, Vue, whatever you want. If you're new here make sure to subscribe and leave a comment because I'll be giving away some free swag at the end of the week. Before we get started here, I would recommend watching Rob's talk at ngcomp to get a better idea of how Angular Elements work. But the basic idea is that we can build an Angular component and then use it outside of an actual Angular app. What we're going to build today is this user poll component, which I have deployed to angularfirebase.com, which is just a static HTML site. And I've even uploaded the code to a Firebase storage bucket, so you can use this component in your own web app by simply adding these two lines of code anywhere in your HTML. And one last thing to mention is that as of this video, at the end of April 2018, Angular Angular 6 hasn't officially been released yet, so you can expect things to change in the near future. Let's go ahead and get started by generating a new Angular app with the CLI, and then we'll install Angular Elements, and we wanna make sure that we have Angular version 6 in package JSON. Then for browser compatibility, we also need to install some polyfills, and we can get those from the web components monorepo. Then go into polyfills ts and import the custom elements polyfills. And just FYI, you can copy and paste all this code from the main lesson link in the video description. The other thing we need to do is install Firebase and AngularFire 2, and then we'll go ahead and generate our component, which I'm calling user pull. Before we actually build the component, I want to show you how to convert it to a custom element using Angular Elements. To do that, we'll go into our app module. And first, we'll bring in our dependencies, which in this case is AngularFire 2. And you should notice the user pull component is already in the declarations from the from the CLI. From there, we'll go ahead and import injector from Angular core and also create custom element from Angular Elements. Then because this component is not declared in the HTML and it's not used by the router, we need to add it to the entry components array. Then we'll go down to the AppModule class and first add the injector to the constructor. Then we'll implement the ng do bootstrap method. Normally, Angular bootstraps automatically, so we don't have to worry about it. But in this case, we need to bootstrap manually. The next thing we'll do is pass our Angular component to the create custom element method. This method serves as a bridge that will convert the Angular component to a custom element that works with native DOM APIs. And the final step is to register it by calling custom elements define and then give it a name and pass in the element that we just created. At this point, we should now be able to use this component outside of the main app root where our Angular components normally live. In fact, you may have noticed I removed the app component so we can just get rid of everything in index HTML and just add our custom element there as the single component for this app. Run ng serve, and you should see the default component displayed in your browser. So that's a working custom element, but we still wanna have this component do something cool, and we also wanna be able to export it and use it in production outside of Angular altogether. Basically, we just want the user to send a yes no fonts, and then we'll record that in the Firestore database and display the results. So here we are in the user pull component, and one important thing we're doing is using view encapsulation native. This will encapsulate all of our CSS styles in the Shadow DOM, which is important for Angular elements because that means all of our CSS will get compiled down to JavaScript.
Otherwise, it would get compiled down to plain CSS, which means we would have to import both the CSS and the JavaScript together to use this outside of Angular. From here, we'll set up a couple properties on the component just to manage the state. We'll have some yes votes, some no votes, and then we'll have a has voted Boolean flag.
voting
And we will also have a reference to the Angular Firestore document in the database. Then I'll go ahead and import Angular Firestore in the constructor. As of this video, you might see an error with Firestore timestamps. If you see this error, you can fix it by adjusting your Firestore settings to have timestamps in snapshot set to true. The next thing I'll do is in NG on init is reference a document in the Firestore database specifically for keeping track of the yes, no votes from this component.
We also want to subscribe to the data in that component, which we can do with value changes, and it will contain the total number of yes and no votes that have been recorded. Because this is an observable, we can pipe in the tap operator, and then we'll set our yes and no properties based on that document data. So that handles the data retrieval. The next thing we'll wanna do is set up an event handler for when the user clicks the button to update the vote count. We will also set this has voted boolean to true, and when that happens, we'll go ahead and show the results and take away the buttons from the element. And then the last thing I'll do is set up some percentages here just so we can show the total ratio of vote counts and also use that to show a progress bar indicator. Now we can switch over to the component HTML. We'll finish building this out just like we would with any other Angular component. We'll use n g f to show some buttons that the user has not voted. Otherwise, if the user has voted, then we'll show the progress bar with the total vote counts that we have stored in Firestore. I think the key takeaway here is that we're building an Angular component just like we would normally. We're not really doing anything special for Angular elements except for maybe that Vue CSS encapsulation.
voting
data
elections
And even that part's optional. At this point, we have a working component, but you might be asking yourself, how do we actually get it's out of Angular, so we can use it somewhere else. Our production build looks something like this. We have about 5 or 6 files in here. So how do we combine all these to use them as a single script tag? Now I should point out the Angular CLI is probably going to do this with a single command in the future, but I don't really feel like waiting for the future, so I'm just gonna show you how to do it now.
First, let's install a couple of NPM packages to make life a little easier, file system extra, and concat. Then create a file called build script dotjs in the root of your project. Basically, all this file is going to do is grab the 3 JavaScript files that Angular builds for production and then concatenate them into a single file.
software development
That will include our inline polyfills and main bundle files. And make sure that you use them in that order. From there, we'll create a directory called elements in our project. Then we'll save the final output in that directory as a file called user poll dotjs. Now we just need to put this together in an npm script so we can run it from the command line. I will call this command build colon elements. First, it will need to run our regular Angular production build, but we'll also set the output hashing to false. Then after the build is done, we'll go ahead and run our build script that we just wrote with Node. Js. If we run it from the command line, you'll see it creates this Elements directory. And if we go in there, there's a single JavaScript file that we can use in any external web app. For example, I set up this demo directory, and if we go into the HTML file, we just put the user pull element in the HTML body and then the script tag right after it. It's still very early to use elements, but this opens up a whole new world of opportunity for Angular developers. I'm gonna go and wrap things up there.
If this video helped you, please like and subscribe. And if you're serious about building apps on the Angular Firebase stack, consider becoming a pro member we're at angularfirebase.com. You'll get access to all kinds of exclusive resources designed to help you build and ship your product sooner. Thanks for watching and I'll see you soon.
youtube
software development
copyright licenses
Today, we'll take an early look at elements, which I think is a total game changer for the Angular ecosystem. In this episode, you'll learn how to build a regular Angular component and then export it to be used outside of an Angular app. And, just for fun, we'll throw Firebase in the mix so we have a real time persistent back end in our component as well. Then I'll give you a script tag so you can embed this component in any web application whether that be WordPress, Ruby on Rails, React app, Vue, whatever you want. If you're new here make sure to subscribe and leave a comment because I'll be giving away some free swag at the end of the week. Before we get started here, I would recommend watching Rob's talk at ngcomp to get a better idea of how Angular Elements work. But the basic idea is that we can build an Angular component and then use it outside of an actual Angular app. What we're going to build today is this user poll component, which I have deployed to angularfirebase.com, which is just a static HTML site. And I've even uploaded the code to a Firebase storage bucket, so you can use this component in your own web app by simply adding these two lines of code anywhere in your HTML. And one last thing to mention is that as of this video, at the end of April 2018, Angular Angular 6 hasn't officially been released yet, so you can expect things to change in the near future. Let's go ahead and get started by generating a new Angular app with the CLI, and then we'll install Angular Elements, and we wanna make sure that we have Angular version 6 in package JSON. Then for browser compatibility, we also need to install some polyfills, and we can get those from the web components monorepo. Then go into polyfills ts and import the custom elements polyfills. And just FYI, you can copy and paste all this code from the main lesson link in the video description. The other thing we need to do is install Firebase and AngularFire 2, and then we'll go ahead and generate our component, which I'm calling user pull. Before we actually build the component, I want to show you how to convert it to a custom element using Angular Elements. To do that, we'll go into our app module. And first, we'll bring in our dependencies, which in this case is AngularFire 2. And you should notice the user pull component is already in the declarations from the from the CLI. From there, we'll go ahead and import injector from Angular core and also create custom element from Angular Elements. Then because this component is not declared in the HTML and it's not used by the router, we need to add it to the entry components array. Then we'll go down to the AppModule class and first add the injector to the constructor. Then we'll implement the ng do bootstrap method. Normally, Angular bootstraps automatically, so we don't have to worry about it. But in this case, we need to bootstrap manually. The next thing we'll do is pass our Angular component to the create custom element method. This method serves as a bridge that will convert the Angular component to a custom element that works with native DOM APIs. And the final step is to register it by calling custom elements define and then give it a name and pass in the element that we just created. At this point, we should now be able to use this component outside of the main app root where our Angular components normally live. In fact, you may have noticed I removed the app component so we can just get rid of everything in index HTML and just add our custom element there as the single component for this app. Run ng serve, and you should see the default component displayed in your browser. So that's a working custom element, but we still wanna have this component do something cool, and we also wanna be able to export it and use it in production outside of Angular altogether. Basically, we just want the user to send a yes no fonts, and then we'll record that in the Firestore database and display the results. So here we are in the user pull component, and one important thing we're doing is using view encapsulation native. This will encapsulate all of our CSS styles in the Shadow DOM, which is important for Angular elements because that means all of our CSS will get compiled down to JavaScript. Otherwise, it would get compiled down to plain CSS, which means we would have to import both the CSS and the JavaScript together to use this outside of Angular. From here, we'll set up a couple properties on the component just to manage the state. We'll have some yes votes, some no votes, and then we'll have a has voted Boolean flag. And we will also have a reference to the Angular Firestore document in the database. Then I'll go ahead and import Angular Firestore in the constructor. As of this video, you might see an error with Firestore timestamps. If you see this error, you can fix it by adjusting your Firestore settings to have timestamps in snapshot set to true. The next thing I'll do is in NG on init is reference a document in the Firestore database specifically for keeping track of the yes, no votes from this component. We also want to subscribe to the data in that component, which we can do with value changes, and it will contain the total number of yes and no votes that have been recorded. Because this is an observable, we can pipe in the tap operator, and then we'll set our yes and no properties based on that document data. So that handles the data retrieval. The next thing we'll wanna do is set up an event handler for when the user clicks the button to update the vote count. We will also set this has voted boolean to true, and when that happens, we'll go ahead and show the results and take away the buttons from the element. And then the last thing I'll do is set up some percentages here just so we can show the total ratio of vote counts and also use that to show a progress bar indicator. Now we can switch over to the component HTML. We'll finish building this out just like we would with any other Angular component. We'll use n g f to show some buttons that the user has not voted. Otherwise, if the user has voted, then we'll show the progress bar with the total vote counts that we have stored in Firestore. I think the key takeaway here is that we're building an Angular component just like we would normally. We're not really doing anything special for Angular elements except for maybe that Vue CSS encapsulation. And even that part's optional. At this point, we have a working component, but you might be asking yourself, how do we actually get it's out of Angular, so we can use it somewhere else. Our production build looks something like this. We have about 5 or 6 files in here. So how do we combine all these to use them as a single script tag? Now I should point out the Angular CLI is probably going to do this with a single command in the future, but I don't really feel like waiting for the future, so I'm just gonna show you how to do it now. First, let's install a couple of NPM packages to make life a little easier, file system extra, and concat. Then create a file called build script dotjs in the root of your project. Basically, all this file is going to do is grab the 3 JavaScript files that Angular builds for production and then concatenate them into a single file. That will include our inline polyfills and main bundle files. And make sure that you use them in that order. From there, we'll create a directory called elements in our project. Then we'll save the final output in that directory as a file called user poll dotjs. Now we just need to put this together in an npm script so we can run it from the command line. I will call this command build colon elements. First, it will need to run our regular Angular production build, but we'll also set the output hashing to false. Then after the build is done, we'll go ahead and run our build script that we just wrote with Node. Js. If we run it from the command line, you'll see it creates this Elements directory. And if we go in there, there's a single JavaScript file that we can use in any external web app. For example, I set up this demo directory, and if we go into the HTML file, we just put the user pull element in the HTML body and then the script tag right after it. It's still very early to use elements, but this opens up a whole new world of opportunity for Angular developers. I'm gonna go and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building apps on the Angular Firebase stack, consider becoming a pro member we're at angularfirebase.com. You'll get access to all kinds of exclusive resources designed to help you build and ship your product sooner. Thanks for watching and I'll see you soon.
Today,
today
we'll
we'll
take
take
an
an
early
early
look
look
at
at
elements,
elements
which
which
I
i
think
think
is
is
a
a
total
total
game
game
changer
changer
for
for
the
the
Angular
angular
ecosystem.
ecosystem
In
in
this
this
episode,
episode
you'll
you'll
learn
learn
how
how
to
to
build
build
a
a
regular
regular
Angular
angular
component
component
and
and
then
then
export
export
it
it
to
to
be
be
used
used
outside
outside
of
of
an
an
Angular
angular
app.
app
And,
and
just
just
for
for
fun,
fun
we'll
we'll
throw
throw
Firebase
firebase
in
in
the
the
mix
mix
so
so
we
we
have
have
a
a
real
real
time
time
persistent
persistent
back
back
end
end
in
in
our
our
component
component
as
as
well.
well
Then
then
I'll
i'll
give
give
you
you
a
a
script
script
tag
tag
so
so
you
you
can
can
embed
embed
this
this
component
component
in
in
any
any
web
web
application
application
whether
whether
that
that
be
be
WordPress,
wordpress
Ruby
ruby
on
on
Rails,
rails
React
react
app,
app
Vue,
vue
whatever
whatever
you
you
want.
want
If
if
you're
you're
new
new
here
here
make
make
sure
sure
to
to
subscribe
subscribe
and
and
leave
leave
a
a
comment
comment
because
because
I'll
i'll
be
be
giving
giving
away
away
some
some
free
free
swag
swag
at
at
the
the
end
end
of
of
the
the
week.
week
Before
before
we
we
get
get
started
started
here,
here
I
i
would
would
recommend
recommend
watching
watching
Rob's
rob's
talk
talk
at
at
ngcomp
ngcomp
to
to
get
get
a
a
better
better
idea
idea
of
of
how
how
Angular
angular
Elements
elements
work.
work
But
but
the
the
basic
basic
idea
idea
is
is
that
that
we
we
can
can
build
build
an
an
Angular
angular
component
component
and
and
then
then
use
use
it
it
outside
outside
of
of
an
an
actual
actual
Angular
angular
app.
app
What
what
we're
we're
going
going
to
to
build
build
today
today
is
is
this
this
user
user
poll
poll
component,
component
which
which
I
i
have
have
deployed
deployed
to
to
angularfirebase.com,
angularfirebase.com
which
which
is
is
just
just
a
a
static
static
HTML
html
site.
site
And
and
I've
i've
even
even
uploaded
uploaded
the
the
code
code
to
to
a
a
Firebase
firebase
storage
storage
bucket,
bucket
so
so
you
you
can
can
use
use
this
this
component
component
in
in
your
your
own
own
web
web
app
app
by
by
simply
simply
adding
adding
these
these
two
two
lines
lines
of
of
code
code
anywhere
anywhere
in
in
your
your
HTML.
html
And
and
one
one
last
last
thing
thing
to
to
mention
mention
is
is
that
that
as
as
of
of
this
this
video,
video
at
at
the
the
end
end
of
of
April
april
2018,
2018
Angular
angular
Angular
angular
6
6
hasn't
hasn't
officially
officially
been
been
released
released
yet,
yet
so
so
you
you
can
can
expect
expect
things
things
to
to
change
change
in
in
the
the
near
near
future.
future
Let's
let's
go
go
ahead
ahead
and
and
get
get
started
started
by
by
generating
generating
a
a
new
new
Angular
angular
app
app
with
with
the
the
CLI,
cli
and
and
then
then
we'll
we'll
install
install
Angular
angular
Elements,
elements
and
and
we
we
wanna
wanna
make
make
sure
sure
that
that
we
we
have
have
Angular
angular
version
version
6
6
in
in
package
package
JSON.
json
Then
then
for
for
browser
browser
compatibility,
compatibility
we
we
also
also
need
need
to
to
install
install
some
some
polyfills,
polyfills
and
and
we
we
can
can
get
get
those
those
from
from
the
the
web
web
components
components
monorepo.
monorepo
Then
then
go
go
into
into
polyfills
polyfills
ts
ts
and
and
import
import
the
the
custom
custom
elements
elements
polyfills.
polyfills
And
and
just
just
FYI,
fyi
you
you
can
can
copy
copy
and
and
paste
paste
all
all
this
this
code
code
from
from
the
the
main
main
lesson
lesson
link
link
in
in
the
the
video
video
description.
description
The
the
other
other
thing
thing
we
we
need
need
to
to
do
do
is
is
install
install
Firebase
firebase
and
and
AngularFire
angularfire
2,
2
and
and
then
then
we'll
we'll
go
go
ahead
ahead
and
and
generate
generate
our
our
component,
component
which
which
I'm
i'm
calling
calling
user
user
pull.
pull
Before
before
we
we
actually
actually
build
build
the
the
component,
component
I
i
want
want
to
to
show
show
you
you
how
how
to
to
convert
convert
it
it
to
to
a
a
custom
custom
element
element
using
using
Angular
angular
Elements.
elements
To
to
do
do
that,
that
we'll
we'll
go
go
into
into
our
our
app
app
module.
module
And
and
first,
first
we'll
we'll
bring
bring
in
in
our
our
dependencies,
dependencies
which
which
in
in
this
this
case
case
is
is
AngularFire
angularfire
2.
2
And
and
you
you
should
should
notice
notice
the
the
user
user
pull
pull
component
component
is
is
already
already
in
in
the
the
declarations
declarations
from
from
the
the
from
from
the
the
CLI.
cli
From
from
there,
there
we'll
we'll
go
go
ahead
ahead
and
and
import
import
injector
injector
from
from
Angular
angular
core
core
and
and
also
also
create
create
custom
custom
element
element
from
from
Angular
angular
Elements.
elements
Then
then
because
because
this
this
component
component
is
is
not
not
declared
declared
in
in
the
the
HTML
html
and
and
it's
it's
not
not
used
used
by
by
the
the
router,
router
we
we
need
need
to
to
add
add
it
it
to
to
the
the
entry
entry
components
components
array.
array
Then
then
we'll
we'll
go
go
down
down
to
to
the
the
AppModule
appmodule
class
class
and
and
first
first
add
add
the
the
injector
injector
to
to
the
the
constructor.
constructor
Then
then
we'll
we'll
implement
implement
the
the
ng
ng
do
do
bootstrap
bootstrap
method.
method
Normally,
normally
Angular
angular
bootstraps
bootstraps
automatically,
automatically
so
so
we
we
don't
don't
have
have
to
to
worry
worry
about
about
it.
it
But
but
in
in
this
this
case,
case
we
we
need
need
to
to
bootstrap
bootstrap
manually.
manually
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
pass
pass
our
our
Angular
angular
component
component
to
to
the
the
create
create
custom
custom
element
element
method.
method
This
this
method
method
serves
serves
as
as
a
a
bridge
bridge
that
that
will
will
convert
convert
the
the
Angular
angular
component
component
to
to
a
a
custom
custom
element
element
that
that
works
works
with
with
native
native
DOM
dom
APIs.
apis
And
and
the
the
final
final
step
step
is
is
to
to
register
register
it
it
by
by
calling
calling
custom
custom
elements
elements
define
define
and
and
then
then
give
give
it
it
a
a
name
name
and
and
pass
pass
in
in
the
the
element
element
that
that
we
we
just
just
created.
created
At
at
this
this
point,
point
we
we
should
should
now
now
be
be
able
able
to
to
use
use
this
this
component
component
outside
outside
of
of
the
the
main
main
app
app
root
root
where
where
our
our
Angular
angular
components
components
normally
normally
live.
live
In
in
fact,
fact
you
you
may
may
have
have
noticed
noticed
I
i
removed
removed
the
the
app
app
component
component
so
so
we
we
can
can
just
just
get
get
rid
rid
of
of
everything
everything
in
in
index
index
HTML
html
and
and
just
just
add
add
our
our
custom
custom
element
element
there
there
as
as
the
the
single
single
component
component
for
for
this
this
app.
app
Run
run
ng
ng
serve,
serve
and
and
you
you
should
should
see
see
the
the
default
default
component
component
displayed
displayed
in
in
your
your
browser.
browser
So
so
that's
that's
a
a
working
working
custom
custom
element,
element
but
but
we
we
still
still
wanna
wanna
have
have
this
this
component
component
do
do
something
something
cool,
cool
and
and
we
we
also
also
wanna
wanna
be
be
able
able
to
to
export
export
it
it
and
and
use
use
it
it
in
in
production
production
outside
outside
of
of
Angular
angular
altogether.
altogether
Basically,
basically
we
we
just
just
want
want
the
the
user
user
to
to
send
send
a
a
yes
yes
no
no
fonts,
fonts
and
and
then
then
we'll
we'll
record
record
that
that
in
in
the
the
Firestore
firestore
database
database
and
and
display
display
the
the
results.
results
So
so
here
here
we
we
are
are
in
in
the
the
user
user
pull
pull
component,
component
and
and
one
one
important
important
thing
thing
we're
we're
doing
doing
is
is
using
using
view
view
encapsulation
encapsulation
native.
native
This
this
will
will
encapsulate
encapsulate
all
all
of
of
our
our
CSS
css
styles
styles
in
in
the
the
Shadow
shadow
DOM,
dom
which
which
is
is
important
important
for
for
Angular
angular
elements
elements
because
because
that
that
means
means
all
all
of
of
our
our
CSS
css
will
will
get
get
compiled
compiled
down
down
to
to
JavaScript.
javascript
Otherwise,
otherwise
it
it
would
would
get
get
compiled
compiled
down
down
to
to
plain
plain
CSS,
css
which
which
means
means
we
we
would
would
have
have
to
to
import
import
both
both
the
the
CSS
css
and
and
the
the
JavaScript
javascript
together
together
to
to
use
use
this
this
outside
outside
of
of
Angular.
angular
From
from
here,
here
we'll
we'll
set
set
up
up
a
a
couple
couple
properties
properties
on
on
the
the
component
component
just
just
to
to
manage
manage
the
the
state.
state
We'll
we'll
have
have
some
some
yes
yes
votes,
votes
some
some
no
no
votes,
votes
and
and
then
then
we'll
we'll
have
have
a
a
has
has
voted
voted
Boolean
boolean
flag.
flag
And
and
we
we
will
will
also
also
have
have
a
a
reference
reference
to
to
the
the
Angular
angular
Firestore
firestore
document
document
in
in
the
the
database.
database
Then
then
I'll
i'll
go
go
ahead
ahead
and
and
import
import
Angular
angular
Firestore
firestore
in
in
the
the
constructor.
constructor
As
as
of
of
this
this
video,
video
you
you
might
might
see
see
an
an
error
error
with
with
Firestore
firestore
timestamps.
timestamps
If
if
you
you
see
see
this
this
error,
error
you
you
can
can
fix
fix
it
it
by
by
adjusting
adjusting
your
your
Firestore
firestore
settings
settings
to
to
have
have
timestamps
timestamps
in
in
snapshot
snapshot
set
set
to
to
true.
true
The
the
next
next
thing
thing
I'll
i'll
do
do
is
is
in
in
NG
ng
on
on
init
init
is
is
reference
reference
a
a
document
document
in
in
the
the
Firestore
firestore
database
database
specifically
specifically
for
for
keeping
keeping
track
track
of
of
the
the
yes,
yes
no
no
votes
votes
from
from
this
this
component.
component
We
we
also
also
want
want
to
to
subscribe
subscribe
to
to
the
the
data
data
in
in
that
that
component,
component
which
which
we
we
can
can
do
do
with
with
value
value
changes,
changes
and
and
it
it
will
will
contain
contain
the
the
total
total
number
number
of
of
yes
yes
and
and
no
no
votes
votes
that
that
have
have
been
been
recorded.
recorded
Because
because
this
this
is
is
an
an
observable,
observable
we
we
can
can
pipe
pipe
in
in
the
the
tap
tap
operator,
operator
and
and
then
then
we'll
we'll
set
set
our
our
yes
yes
and
and
no
no
properties
properties
based
based
on
on
that
that
document
document
data.
data
So
so
that
that
handles
handles
the
the
data
data
retrieval.
retrieval
The
the
next
next
thing
thing
we'll
we'll
wanna
wanna
do
do
is
is
set
set
up
up
an
an
event
event
handler
handler
for
for
when
when
the
the
user
user
clicks
clicks
the
the
button
button
to
to
update
update
the
the
vote
vote
count.
count
We
we
will
will
also
also
set
set
this
this
has
has
voted
voted
boolean
boolean
to
to
true,
true
and
and
when
when
that
that
happens,
happens
we'll
we'll
go
go
ahead
ahead
and
and
show
show
the
the
results
results
and
and
take
take
away
away
the
the
buttons
buttons
from
from
the
the
element.
element
And
and
then
then
the
the
last
last
thing
thing
I'll
i'll
do
do
is
is
set
set
up
up
some
some
percentages
percentages
here
here
just
just
so
so
we
we
can
can
show
show
the
the
total
total
ratio
ratio
of
of
vote
vote
counts
counts
and
and
also
also
use
use
that
that
to
to
show
show
a
a
progress
progress
bar
bar
indicator.
indicator
Now
now
we
we
can
can
switch
switch
over
over
to
to
the
the
component
component
HTML.
html
We'll
we'll
finish
finish
building
building
this
this
out
out
just
just
like
like
we
we
would
would
with
with
any
any
other
other
Angular
angular
component.
component
We'll
we'll
use
use
n
n
g
g
f
f
to
to
show
show
some
some
buttons
buttons
that
that
the
the
user
user
has
has
not
not
voted.
voted
Otherwise,
otherwise
if
if
the
the
user
user
has
has
voted,
voted
then
then
we'll
we'll
show
show
the
the
progress
progress
bar
bar
with
with
the
the
total
total
vote
vote
counts
counts
that
that
we
we
have
have
stored
stored
in
in
Firestore.
firestore
I
i
think
think
the
the
key
key
takeaway
takeaway
here
here
is
is
that
that
we're
we're
building
building
an
an
Angular
angular
component
component
just
just
like
like
we
we
would
would
normally.
normally
We're
we're
not
not
really
really
doing
doing
anything
anything
special
special
for
for
Angular
angular
elements
elements
except
except
for
for
maybe
maybe
that
that
Vue
vue
CSS
css
encapsulation.
encapsulation
And
and
even
even
that
that
part's
part's
optional.
optional
At
at
this
this
point,
point
we
we
have
have
a
a
working
working
component,
component
but
but
you
you
might
might
be
be
asking
asking
yourself,
yourself
how
how
do
do
we
we
actually
actually
get
get
it's
it's
out
out
of
of
Angular,
angular
so
so
we
we
can
can
use
use
it
it
somewhere
somewhere
else.
else
Our
our
production
production
build
build
looks
looks
something
something
like
like
this.
this
We
we
have
have
about
about
5
5
or
or
6
6
files
files
in
in
here.
here
So
so
how
how
do
do
we
we
combine
combine
all
all
these
these
to
to
use
use
them
them
as
as
a
a
single
single
script
script
tag?
tag
Now
now
I
i
should
should
point
point
out
out
the
the
Angular
angular
CLI
cli
is
is
probably
probably
going
going
to
to
do
do
this
this
with
with
a
a
single
single
command
command
in
in
the
the
future,
future
but
but
I
i
don't
don't
really
really
feel
feel
like
like
waiting
waiting
for
for
the
the
future,
future
so
so
I'm
i'm
just
just
gonna
gonna
show
show
you
you
how
how
to
to
do
do
it
it
now.
now
First,
first
let's
let's
install
install
a
a
couple
couple
of
of
NPM
npm
packages
packages
to
to
make
make
life
life
a
a
little
little
easier,
easier
file
file
system
system
extra,
extra
and
and
concat.
concat
Then
then
create
create
a
a
file
file
called
called
build
build
script
script
dotjs
dotjs
in
in
the
the
root
root
of
of
your
your
project.
project
Basically,
basically
all
all
this
this
file
file
is
is
going
going
to
to
do
do
is
is
grab
grab
the
the
3
3
JavaScript
javascript
files
files
that
that
Angular
angular
builds
builds
for
for
production
production
and
and
then
then
concatenate
concatenate
them
them
into
into
a
a
single
single
file.
file
That
that
will
will
include
include
our
our
inline
inline
polyfills
polyfills
and
and
main
main
bundle
bundle
files.
files
And
and
make
make
sure
sure
that
that
you
you
use
use
them
them
in
in
that
that
order.
order
From
from
there,
there
we'll
we'll
create
create
a
a
directory
directory
called
called
elements
elements
in
in
our
our
project.
project
Then
then
we'll
we'll
save
save
the
the
final
final
output
output
in
in
that
that
directory
directory
as
as
a
a
file
file
called
called
user
user
poll
poll
dotjs.
dotjs
Now
now
we
we
just
just
need
need
to
to
put
put
this
this
together
together
in
in
an
an
npm
npm
script
script
so
so
we
we
can
can
run
run
it
it
from
from
the
the
command
command
line.
line
I
i
will
will
call
call
this
this
command
command
build
build
colon
colon
elements.
elements
First,
first
it
it
will
will
need
need
to
to
run
run
our
our
regular
regular
Angular
angular
production
production
build,
build
but
but
we'll
we'll
also
also
set
set
the
the
output
output
hashing
hashing
to
to
false.
false
Then
then
after
after
the
the
build
build
is
is
done,
done
we'll
we'll
go
go
ahead
ahead
and
and
run
run
our
our
build
build
script
script
that
that
we
we
just
just
wrote
wrote
with
with
Node.
node
Js.
js
If
if
we
we
run
run
it
it
from
from
the
the
command
command
line,
line
you'll
you'll
see
see
it
it
creates
creates
this
this
Elements
elements
directory.
directory
And
and
if
if
we
we
go
go
in
in
there,
there
there's
there's
a
a
single
single
JavaScript
javascript
file
file
that
that
we
we
can
can
use
use
in
in
any
any
external
external
web
web
app.
app
For
for
example,
example
I
i
set
set
up
up
this
this
demo
demo
directory,
directory
and
and
if
if
we
we
go
go
into
into
the
the
HTML
html
file,
file
we
we
just
just
put
put
the
the
user
user
pull
pull
element
element
in
in
the
the
HTML
html
body
body
and
and
then
then
the
the
script
script
tag
tag
right
right
after
after
it.
it
It's
it's
still
still
very
very
early
early
to
to
use
use
elements,
elements
but
but
this
this
opens
opens
up
up
a
a
whole
whole
new
new
world
world
of
of
opportunity
opportunity
for
for
Angular
angular
developers.
developers
I'm
i'm
gonna
gonna
go
go
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
building
building
apps
apps
on
on
the
the
Angular
angular
Firebase
firebase
stack,
stack
consider
consider
becoming
becoming
a
a
pro
pro
member
member
we're
we're
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
get
get
access
access
to
to
all
all
kinds
kinds
of
of
exclusive
exclusive
resources
resources
designed
designed
to
to
help
help
you
you
build
build
and
and
ship
ship
your
your
product
product
sooner.
sooner
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
soon.
soon
success
The speaker explains how to build a Angular component and export it to be used outside of an Angular app. They recommend watching for updates and installing Angularems and Angular queries to ensure the app is updated and ready for production. They also discuss how to convert a Angular component to a custom element and pass it to the create custom element method. The importance of building an Angular component and not making special changes for Angular elements is emphasized. The speaker also discusses setting up a Angular component and creating a reference to the Angular Firorness document in the database, as well as setting up an event handler and a percentages bar for the total vote count. Finally, they provide resources for developers to build and ship their product.
Angular Elements Quick Start
Today, we'll take an early look at elements, which I think is a total game changer for the Angular ecosystem. In this episode, you'll learn how to build a regular Angular component and then export it to be used outside of an Angular app. And, just for fun, we'll throw Firebase in the mix so we have a real time persistent back end in our component as well. Then I'll give you a script tag so you can embed this component in any web application whether that be WordPress, Ruby on Rails, React app, Vue, whatever you want. If you're new here make sure to subscribe and leave a comment because I'll be giving away some free swag at the end of the week. Before we get started here, I would recommend watching Rob's talk at ngcomp to get a better idea of how Angular Elements work. But the basic idea is that we can build an Angular component and then use it outside of an actual Angular app. What we're going to build today is this user poll component, which I have deployed to angularfirebase.com, which is just a static HTML site. And I've even uploaded the code to a Firebase storage bucket, so you can use this component in your own web app by simply adding these two lines of code anywhere in your HTML. And one last thing to mention is that as of this video, at the end of April 2018, Angular Angular 6 hasn't officially been released yet, so you can expect things to change in the near future. Let's go ahead and get started by generating a new Angular app with the CLI, and then we'll install Angular Elements, and we wanna make sure that we have Angular version 6 in package JSON. Then for browser compatibility, we also need to install some polyfills, and we can get those from the web components monorepo. Then go into polyfills ts and import the custom elements polyfills. And just FYI, you can copy and paste all this code from the main lesson link in the video description. The other thing we need to do is install Firebase and AngularFire 2, and then we'll go ahead and generate our component, which I'm calling user pull. Before we actually build the component, I want to show you how to convert it to a custom element using Angular Elements. To do that, we'll go into our app module. And first, we'll bring in our dependencies, which in this case is AngularFire 2. And you should notice the user pull component is already in the declarations from the from the CLI. From there, we'll go ahead and import injector from Angular core and also create custom element from Angular Elements. Then because this component is not declared in the HTML and it's not used by the router, we need to add it to the entry components array. Then we'll go down to the AppModule class and first add the injector to the constructor. Then we'll implement the ng do bootstrap method. Normally, Angular bootstraps automatically, so we don't have to worry about it. But in this case, we need to bootstrap manually. The next thing we'll do is pass our Angular component to the create custom element method. This method serves as a bridge that will convert the Angular component to a custom element that works with native DOM APIs. And the final step is to register it by calling custom elements define and then give it a name and pass in the element that we just created. At this point, we should now be able to use this component outside of the main app root where our Angular components normally live. In fact, you may have noticed I removed the app component so we can just get rid of everything in index HTML and just add our custom element there as the single component for this app. Run ng serve, and you should see the default component displayed in your browser. So that's a working custom element, but we still wanna have this component do something cool, and we also wanna be able to export it and use it in production outside of Angular altogether. Basically, we just want the user to send a yes no fonts, and then we'll record that in the Firestore database and display the results. So here we are in the user pull component, and one important thing we're doing is using view encapsulation native. This will encapsulate all of our CSS styles in the Shadow DOM, which is important for Angular elements because that means all of our CSS will get compiled down to JavaScript. Otherwise, it would get compiled down to plain CSS, which means we would have to import both the CSS and the JavaScript together to use this outside of Angular. From here, we'll set up a couple properties on the component just to manage the state. We'll have some yes votes, some no votes, and then we'll have a has voted Boolean flag. And we will also have a reference to the Angular Firestore document in the database. Then I'll go ahead and import Angular Firestore in the constructor. As of this video, you might see an error with Firestore timestamps. If you see this error, you can fix it by adjusting your Firestore settings to have timestamps in snapshot set to true. The next thing I'll do is in NG on init is reference a document in the Firestore database specifically for keeping track of the yes, no votes from this component. We also want to subscribe to the data in that component, which we can do with value changes, and it will contain the total number of yes and no votes that have been recorded. Because this is an observable, we can pipe in the tap operator, and then we'll set our yes and no properties based on that document data. So that handles the data retrieval. The next thing we'll wanna do is set up an event handler for when the user clicks the button to update the vote count. We will also set this has voted boolean to true, and when that happens, we'll go ahead and show the results and take away the buttons from the element. And then the last thing I'll do is set up some percentages here just so we can show the total ratio of vote counts and also use that to show a progress bar indicator. Now we can switch over to the component HTML. We'll finish building this out just like we would with any other Angular component. We'll use n g f to show some buttons that the user has not voted. Otherwise, if the user has voted, then we'll show the progress bar with the total vote counts that we have stored in Firestore. I think the key takeaway here is that we're building an Angular component just like we would normally. We're not really doing anything special for Angular elements except for maybe that Vue CSS encapsulation. And even that part's optional. At this point, we have a working component, but you might be asking yourself, how do we actually get it's out of Angular, so we can use it somewhere else. Our production build looks something like this. We have about 5 or 6 files in here. So how do we combine all these to use them as a single script tag? Now I should point out the Angular CLI is probably going to do this with a single command in the future, but I don't really feel like waiting for the future, so I'm just gonna show you how to do it now. First, let's install a couple of NPM packages to make life a little easier, file system extra, and concat. Then create a file called build script dotjs in the root of your project. Basically, all this file is going to do is grab the 3 JavaScript files that Angular builds for production and then concatenate them into a single file. That will include our inline polyfills and main bundle files. And make sure that you use them in that order. From there, we'll create a directory called elements in our project. Then we'll save the final output in that directory as a file called user poll dotjs. Now we just need to put this together in an npm script so we can run it from the command line. I will call this command build colon elements. First, it will need to run our regular Angular production build, but we'll also set the output hashing to false. Then after the build is done, we'll go ahead and run our build script that we just wrote with Node. Js. If we run it from the command line, you'll see it creates this Elements directory. And if we go in there, there's a single JavaScript file that we can use in any external web app. For example, I set up this demo directory, and if we go into the HTML file, we just put the user pull element in the HTML body and then the script tag right after it. It's still very early to use elements, but this opens up a whole new world of opportunity for Angular developers. I'm gonna go and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building apps on the Angular Firebase stack, consider becoming a pro member we're at angularfirebase.com. You'll get access to all kinds of exclusive resources designed to help you build and ship your product sooner. Thanks for watching and I'll see you soon.
The speaker explains how to build a Angular component and export it to be used outside of an Angular app. They recommend watching for updates and installing Angularems and Angular queries to ensure the app is updated and ready for production. They also discuss how to convert a Angular component to a custom element and pass it to the create custom element method. The importance of building an Angular component and not making special changes for Angular elements is emphasized. The speaker also discusses setting up a Angular component and creating a reference to the Angular Firorness document in the database, as well as setting up an event handler and a percentages bar for the total vote count. Finally, they provide resources for developers to build and ship their product.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Angular Elements Quick Start 
        and a small summary : The speaker explains how to build a Angular component and export it to be used outside of an Angular app. They recommend watching for updates and installing Angularems and Angular queries to ensure the app is updated and ready for production. They also discuss how to convert a Angular component to a custom element and pass it to the create custom element method. The importance of building an Angular component and not making special changes for Angular elements is emphasized. The speaker also discusses setting up a Angular component and creating a reference to the Angular Firorness document in the database, as well as setting up an event handler and a percentages bar for the total vote count. Finally, they provide resources for developers to build and ship their product.
        [/INST]
        
        Generate the video : Today, we'll take an early look at elements, which I think is a total game changer for the Angular ecosystem. In this episode, you'll learn how to build a regular Angular component and then export it to be used outside of an Angular app. And, just for fun, we'll throw Firebase in the mix so we have a real time persistent back end in our component as well. Then I'll give you a script tag so you can embed this component in any web application whether that be WordPress, Ruby on Rails, React app, Vue, whatever you want. If you're new here make sure to subscribe and leave a comment because I'll be giving away some free swag at the end of the week. Before we get started here, I would recommend watching Rob's talk at ngcomp to get a better idea of how Angular Elements work. But the basic idea is that we can build an Angular component and then use it outside of an actual Angular app. What we're going to build today is this user poll component, which I have deployed to angularfirebase.com, which is just a static HTML site. And I've even uploaded the code to a Firebase storage bucket, so you can use this component in your own web app by simply adding these two lines of code anywhere in your HTML. And one last thing to mention is that as of this video, at the end of April 2018, Angular Angular 6 hasn't officially been released yet, so you can expect things to change in the near future. Let's go ahead and get started by generating a new Angular app with the CLI, and then we'll install Angular Elements, and we wanna make sure that we have Angular version 6 in package JSON. Then for browser compatibility, we also need to install some polyfills, and we can get those from the web components monorepo. Then go into polyfills ts and import the custom elements polyfills. And just FYI, you can copy and paste all this code from the main lesson link in the video description. The other thing we need to do is install Firebase and AngularFire 2, and then we'll go ahead and generate our component, which I'm calling user pull. Before we actually build the component, I want to show you how to convert it to a custom element using Angular Elements. To do that, we'll go into our app module. And first, we'll bring in our dependencies, which in this case is AngularFire 2. And you should notice the user pull component is already in the declarations from the from the CLI. From there, we'll go ahead and import injector from Angular core and also create custom element from Angular Elements. Then because this component is not declared in the HTML and it's not used by the router, we need to add it to the entry components array. Then we'll go down to the AppModule class and first add the injector to the constructor. Then we'll implement the ng do bootstrap method. Normally, Angular bootstraps automatically, so we don't have to worry about it. But in this case, we need to bootstrap manually. The next thing we'll do is pass our Angular component to the create custom element method. This method serves as a bridge that will convert the Angular component to a custom element that works with native DOM APIs. And the final step is to register it by calling custom elements define and then give it a name and pass in the element that we just created. At this point, we should now be able to use this component outside of the main app root where our Angular components normally live. In fact, you may have noticed I removed the app component so we can just get rid of everything in index HTML and just add our custom element there as the single component for this app. Run ng serve, and you should see the default component displayed in your browser. So that's a working custom element, but we still wanna have this component do something cool, and we also wanna be able to export it and use it in production outside of Angular altogether. Basically, we just want the user to send a yes no fonts, and then we'll record that in the Firestore database and display the results. So here we are in the user pull component, and one important thing we're doing is using view encapsulation native. This will encapsulate all of our CSS styles in the Shadow DOM, which is important for Angular elements because that means all of our CSS will get compiled down to JavaScript. Otherwise, it would get compiled down to plain CSS, which means we would have to import both the CSS and the JavaScript together to use this outside of Angular. From here, we'll set up a couple properties on the component just to manage the state. We'll have some yes votes, some no votes, and then we'll have a has voted Boolean flag. And we will also have a reference to the Angular Firestore document in the database. Then I'll go ahead and import Angular Firestore in the constructor. As of this video, you might see an error with Firestore timestamps. If you see this error, you can fix it by adjusting your Firestore settings to have timestamps in snapshot set to true. The next thing I'll do is in NG on init is reference a document in the Firestore database specifically for keeping track of the yes, no votes from this component. We also want to subscribe to the data in that component, which we can do with value changes, and it will contain the total number of yes and no votes that have been recorded. Because this is an observable, we can pipe in the tap operator, and then we'll set our yes and no properties based on that document data. So that handles the data retrieval. The next thing we'll wanna do is set up an event handler for when the user clicks the button to update the vote count. We will also set this has voted boolean to true, and when that happens, we'll go ahead and show the results and take away the buttons from the element. And then the last thing I'll do is set up some percentages here just so we can show the total ratio of vote counts and also use that to show a progress bar indicator. Now we can switch over to the component HTML. We'll finish building this out just like we would with any other Angular component. We'll use n g f to show some buttons that the user has not voted. Otherwise, if the user has voted, then we'll show the progress bar with the total vote counts that we have stored in Firestore. I think the key takeaway here is that we're building an Angular component just like we would normally. We're not really doing anything special for Angular elements except for maybe that Vue CSS encapsulation. And even that part's optional. At this point, we have a working component, but you might be asking yourself, how do we actually get it's out of Angular, so we can use it somewhere else. Our production build looks something like this. We have about 5 or 6 files in here. So how do we combine all these to use them as a single script tag? Now I should point out the Angular CLI is probably going to do this with a single command in the future, but I don't really feel like waiting for the future, so I'm just gonna show you how to do it now. First, let's install a couple of NPM packages to make life a little easier, file system extra, and concat. Then create a file called build script dotjs in the root of your project. Basically, all this file is going to do is grab the 3 JavaScript files that Angular builds for production and then concatenate them into a single file. That will include our inline polyfills and main bundle files. And make sure that you use them in that order. From there, we'll create a directory called elements in our project. Then we'll save the final output in that directory as a file called user poll dotjs. Now we just need to put this together in an npm script so we can run it from the command line. I will call this command build colon elements. First, it will need to run our regular Angular production build, but we'll also set the output hashing to false. Then after the build is done, we'll go ahead and run our build script that we just wrote with Node. Js. If we run it from the command line, you'll see it creates this Elements directory. And if we go in there, there's a single JavaScript file that we can use in any external web app. For example, I set up this demo directory, and if we go into the HTML file, we just put the user pull element in the HTML body and then the script tag right after it. It's still very early to use elements, but this opens up a whole new world of opportunity for Angular developers. I'm gonna go and wrap things up there. If this video helped you, please like and subscribe. And if you're serious about building apps on the Angular Firebase stack, consider becoming a pro member we're at angularfirebase.com. You'll get access to all kinds of exclusive resources designed to help you build and ship your product sooner. Thanks for watching and I'll see you soon.
        