Plunker or plnkr is an online community for creating, collaborating and sharing your web development ideas. It works flawlessly with Angular and if you want to quickly try a feature or prototype an idea, this is the go to app for that.
Plunkr allows us to write plunks(code) and share it with other developers. The editor is pretty slick and easy to use.
Head over to https://plnkr.co/
So, go to New -> Angular
Don’t worry about the prompt, just say yes.
Here you go. You have your first Angular app ready. To view the output, just click on this little eye icon (live preview) which is for preview and you can see “Hello Angular!” followed by it’s version.
That’s it. That’s how you create your Angular app with Plunker
When you create an Angular plunker, the following files are automatically created for you:
config.js : This is the configuration file for your app.
index.html : The main html file
README.md : Readme.md is a markdown file for this project. README.md is used to generate the html summary of our projects.
src/app.ts : The root app component
src/main.ts : This file is used tell Angular to start up our application. This code initializes the platform that our application runs in, browser in this case and then uses the platform to bootstrap our AppModule.
style.css : This file is used to add global styles and also import other style files.
Let’s try to change the output that you see to “Hello World”!
Let’s go to app.ts and change the value of name here in this class to “world”. As expected, it now displays “Hello World”.