How to use Plunker in Angular ?

Plunker is a website where developers can Collab on projects and share their ideas with each other. You can actually collab in real-time so that all team members work at the same time. Plunker is absolutely free to use you can just sign up from Github. Start using it, and you can also see your work live that is live preview is available so that developers can see their work live and modify their code accordingly.

Easy to use. The website may be slow, but it offers plenty of the features to have a fun collaborative experience.

Plunker is a web-based editor, with this, you can create, edit and run HTML, CSS, and JavaScript files directly from your browser. No Complex setup required, everyone can code directly in the browser immediately. 

Now the very interesting thing is each plunker has its own unique URL which you can share with friends/developers, so it’s an amazing way to showcase your work. But You cannot edit/modify someone else’s plunker, Instead, you can fork it. As you all know Forking creates a new plunker that you own with all the files copied.

If your plunker has an index.html file, you can try running the file, and you can live preview.

Features of Plunker:

• Never lose your work
• Site-wide search
• Desktop Integration
• Embeddable Editor
• Multi-file, multi-pane editor

Structure of an Angular Plunker: An Angular plunker is made up of the following files:

• index.html This is the HTML file that contains all the libraries and design (Bootstraps) for the Angular Application.
• script.ts This is the main file in which we will be dumping all of our Angular code which belongs to our project.
• system.config.js This file is used for Configuration of SystemJS which handles module loading and compilation of TypeScript into JavaScript.
• tsconfig.json Configuration for the TypeScript transpiler.

Steps to run: 

• Doesn’t require any additional setups everything You can code directly on the web.
• This is the link of Plunker official: https://plnkr.co/  go to this website,
• Click on the new button as show: This will take you to a popup

• Now you will get a popup asking for which programming language you want to code select Angular Starter Template

• Here we have already discussed Every file in brief (In the structure of plunker). You can just start writing Your code and share it with your friends whenever you need help!

• It’s just basic example to show you how it works.

 
Example:

Now add the CSS according to you, like how you want your website to look.

h1,
p {
    font-family: sans-serif;
}

Output:

So this all about plunker, now let’s talk about some pros and cons of plunker to give it a final touch and condense the article by a summary in the end.

Advantages : 

• Plunker allows us to add multiple files to the project.
• This is just a better way than a simple demo.
• It features a real-time code collaboration and live preview, code linting.
• The project is Licensed by MIT.
• Very easy UI, nothing complex.

Dis-Advantages :

• Unfortunately, the embedded code cannot be edited directly, You need to open it on plunker to make changes with the code example.
• The website is a little slow compared to its competitors.