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 Get our React Native Course for FREE!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get FREE access to our React Native course, coming soon on Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.