Using Web-based Angular 2 Editor [Angular Tutorial]

Let’s start off with the basic development of an app. Here, we’re going to use the site http://www.plnkr.co, an easy to use web based editor:

angular 2 editor

This is the editor. It’s divided into 3 parts. Starting from the right is the file directory tab. Next the editing space, and the package tab.

angular 2 editor

You can explore the parts in the file directory or play with the editor. But for now, let’s do a simple project.

To create a new Angular 2 template, click New>Angular>2.0(TS) – for now we will be using TypeScript.

angular 2 editor

This Angular 2 Template is ready to be run. Just simply edit the constructor named “this.name” from src/app.ts and set it to your preference. Click “Run” and it’s done! Your very first Angular 2 application.

angular 2 editor

Save your work and change the name to your preference. And if you want to share your work, just simply copy the URL and send it to your friends! You can also send it via email. There’s an email icon on the top right area of the site.

Liked this tutorial blog? A more in-depth Angular 2 tutorial can also be found here.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.