Material Button with Icon + Stackblitz
I attended the Enterprise NG Conference by ng-conf last week. Eric Simons (@EricSimons40) the founder of StackBlitz got me re-engaged with StackBlitz. I learned about StackBlitz 3 years ago when I attended an Angular Meetup hosted by StackBlitz in San Francisco (2017). I was on a pleasure trip with my wife — however, when I found out that the Angular Core Team was going to be there that evening I just had to go. It was a fun night!
One of the main use-cases of StackBlitz is for online documentation — to show some code, or rather a working application within a browser. This is an amazing feat. You can load an entire development environment within a few seconds and start writing code. Seeing this live 3 years ago was amazing.
Get Matt Vaughn’s stories in your inbox
Join Medium for free to get updates from this writer.
It is easy to get a StackBlitz project embedded into a web page. I used the URL for my specific StackBlitz project and embedding it on my Medium blog. My URL:
https://stackblitz.com/edit/icon-buttonThe result is a running Angular application with:
- Code Editor (Angular Project) with the latest version
- Visual Studio Code experience in a browser
- custom name for the StackBlitz project
You can click on the [Edit on StackBlitz] link and it will open the code and application in a separate window. You can also fork the project and modify the code.
More Uses for StackBlitz
There is a new version for the Enterprise that will allow private StackBlitz projects for a company — on-premise hosting of projects. This will allow for development teams to create and share proof-of-concept (POC) applications.
Some teams require a StackBlitz proof to accompany a bugfix item. This kind of project could demonstrate the issue with a code sample.
You could also use a StackBlitz project to target an Angular package — a custom package or a 3rd-party package you want to investigate and learn more about. You can create a POC project with working examples.
