Hello Angular…

Let’s start with our first angular app , we are gonna build an app with a heading and a sub-heading .

Step 1 : Pull up the terminal or cmd & direct it to the root folder where you want to keep your angular project.

Step 2 : Run the angular cli and have generate a project for you.

ng new hello-angular

“this will generate a project named hello-angular for you”

Step 3 : Go the hello-angular folder through terminal & run the command

code .

What this will do is open your project in VS code.

Now that your project is open you’ll see a bunch of folder

What you have got is e2e folder , which is for end to end or integration test.

You have node_modules folder ,which is used for holding npm packages.

Last but not least is the src folder , this is where we’ll work.In src folder you’ll see is app,assets,environments etc folder and your index.html file , your main style-sheet etc etc.

By default the index.html has a tag that leads to the app root and thats gonna come to the app module.

If you start the project now,pull up the terminal in VS Code and enter the command :

npm start

Once your project gets compiled successfully.You can run it on your browser at localhost:4200 you’ll see the default angular welcome page.

So,our next step is going to be start building our welcome page ..

So how do we do it ??

If your answer was to create a component Good Job!!

You can component using following command :

ng g component title-bar

title-bar is the name of the component .

And what’s its gonna go is create a component for us named title-bar.

Let’s get something really important go to src>app>title-bar>title-bar.component.ts

and grab the selector. {app-title-bar}

Selector is what we are going to use to call the component from other component template.

Go to app.component.html and Clean all the data in there & add the tag <app-title-bar></app-title-bar> (Fig 4)

Fig 4

Now go to title-bar.component.html write the html code for whatever you want to display on the welcome page.

In my case :

<div class="centered container ">
<h1>I am Groot</h1>
</div>
<div class="centered container">
<h2>aha Hello World is boring</h2>
</div>

Add some css to the mix from your main style sheet.

Save your project & Run it.

You got your first angular project up and running.

If you face any problem feel free to get in touch with me at medium or twitter.

Twitter Handle : @mandeep1154