Getting Started With Angular 6 - Part One

Introduction

There is some improvement in Angular 6 from the previous stable release version. Please check here. In this article, we will learn how to build our own Angular 6 application and,

1. How to create a component
2. How to call selectors
3. How to add a stylesheet, header, footer, and dummy text to our application

To learn the basics, click here.

 

Step 1

Create a directory on your local computer. Open this folder using CMD. To install/update the latest Angular 6, use the below command.

npm install -g @angular/cli

 

To check the version of the user.

ng -v

 

Now, create a new project use the below command.

ng new New-Project-Name

 

I am going to create the FirstApp project.

 

Step 2

Now, to run the application, open FirstApp folder and using the command prompt, type the below command which will compile your application and open it in the browser. Here, use -o for opening it. 

 

Note
If you are using Visual Studio Code, then right-click on the src folder and click on "Open a Terminal"; so you can run your project from here as well.

ng server -o

 

If the port is being already used, then change the port by using the below command.

ng serve --port New-Port-Number

I am changing this port to 4201. Your output will look like this.

 

Step 3

Create your own components as below. Create a new folder named 'components' in your project and open this in the terminal and use the below command to create a component.

ng g c Your-Component-Name

I am going to create Header component here. It will create HTML, CSS, spec.ts & ts files in the Header folder.

Note
Here, we have no need to use the "components" word while creating the components. For example, if you would like to create a Component Header, then use,

ng g c Header

 

In the Header HTML, I am creating some menus & a logo so it will look like the header component as below.

 

header.component.html 

<div style="text-align:Left">
   <img width="200" alt="CodderFunda Logo" src="http://coderfunda.com/wp-content/uploads/2018/02/logo2.png">
</div>
<ul>
  <li><a href="#">C#</a></li>
  <li><a href="#">ASP.NET</a></li>
  <li><a href="#">Angular</a></li>
</ul>

Step 4

Now, I am going to create a footer component as well and will write some copyrighted code in that. Create a component by using the above step 3 and write the below respective code in that.

In footer.component.css, I will write some CSS for footer content so it will look better.

 

footer.component.html

<footer>
  <p>All rights reserved (c) 2018</p>
</footer>

footer.component.css

/* Style the footer */
footer {
    background-color: #49a5f1;
    padding: 10px;
    text-align: center;
    color: white;
}

Step 5

I am calling the selector in app.component.html file. Call the templates header & footer by using selector as,

<app-header></app-header>

Selector

The CSS selector identifies this directive in a template and triggers instantiation of the directive. In app.component.css, I will write some CSS for article content so it will look better.

 

app.component.html

<app-header></app-header>
<article>
<p>
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</article>
<app-footer></app-footer>

app.component.css

article {
    padding: 20px;
    width: 98%;
    background-color: #dae246;
    height: 120px;
}

 Now, run the application and you will see the following.

 

 

 

Summary

In this article, you learned how to create a project in Angular 6, how to create components in Angular 6, and some more basics.