In this blog, we are going to learn, how to create your first app in angular 7. We will use the Angular CLI tool to create our app.

Prerequisites

Before creating your first Angular 7 app, please make sure that you have latest version of Node.js. and NPM package manager.

You can also check this link, how to setup or upgrade your Angular 6 to Angular 7.

Update Angular 6 to Angular 7 version

After installing Node.js & NPM, let’s move to the next step of how to create your first Angular 7 app.

Creating initial application

Create an empty folder name ZeptoBookProj, and navigate to this folder using command line terminal. Then we will create our application using the name zeptoapp. Run this command in your terminal window.

1

ng new zeptoapp

It will ask two questions, like this in below.

1

? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS

Once, Angular CLI setup the project, you can see folder structure like this in your project folder.

Run your app

Now, run this command in the terminal window to open your angular app in browser window.

1

ng serve --open

This command will build your app, and open it in the browser window, with default url of http://localhost:4200/

You can see, our first app zeptoapp build and run successfully in the browser window.

Angular app Components

Angular components are the building blocks of any angular application. They are used to display data to user, takes user inputs and produce output. Angular CLI create a default component in the src->app folder.

Look into the app folder of your project folder.

In the above screenshot, you can see, our app have default component. Any component in angular app consists of three elements, that is, like component.html, component.css and a component.ts files.

app.component.html

app.component.html file contains the component’s html template. Here, you can create your view, and write the data binding syntax. Open your app.component.html file, you can see, it contains all the html syntax. I am going to delete all unnecessary html syntax and clean the code.

1
2
3
4
5
6
7
8

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
 
<router-outlet></router-outlet>
</div>

Right now, we have just few lines of codes in our html template file. After deleting the extra code, our web page looks like this.

app.component.css

app.component.css file contains the component level css. In this file, you can write your own css code to design your component template file. Here, I changed the color of title to blue using this file.

1

h1 { color: blue; }

app.component.ts

app.component.ts file is a typescript file, having file extension of .ts. This file is a metadata of a component. Let’s take a look at our app.component.ts file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'zeptoapp';
}

First statement is an import statement. We will import component decorator from the angular/core module.

After importing, we are using @Component decorator to specify the Angular metadata for the component.

The Angular CLI generate three metadata properties for the component.

• selector: app-root is a CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML.
• templateUrl: templateUrl represents the url of component’s HTML template. Instead of templateUrl, you can use template property to specify the inline HTML template.
• styleUrls: styleUrls specifies the path of the component’s CSS file, where you can define all CSS related to this component.

Then, in the last, we have export class statement. Angular CLI create a component class with the export keyword, so that you can use this component at other places as well. If you notice, we have set the title property to ‘zeptoapp’. you can create as many properties as you want.

1

title = 'zeptoapp';

We are displaying the same property in our component’s HTML template i.e app.component.html.

1

<h1> Welcome to {{ title }}! </h1>

Here in our component’s template file, we are binding the title property in double curly braces. The double curly braces are Angular’s interpolation binding syntax. Once the browser render our component, it will display the value of component’s title property i.e zeptoapp.

So, in the first bullet point about selector, we haven’t seen where this component is placed in our project code. You will be wondered then how this component is display in the browser. Here is the answer, if you open index.html file, you will find our component tag there. Look at the code of our index.html file below.

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Zeptoapp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

If you notice line 12, our component <app-root></app-root> is placed there.

app-routing.module.ts

If you remember, Angular CLI asked two questions while creating our angular app.

In the first question, it was asking to add Angular routing, and we answered Yes. Now, what is Angular routing?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Routing is used for the navigation purpose. With the help of Angular Router, a user can navigate from one view to another.  Angular router fetch the browser url, analyze the url to determine which view to show, and render that specific view to user. It can also parse the parameters passed in the browser url. There are different ways to navigate to a view.

• Entering a url in the browser address bar and browser will navigate to that page.
• Clicking on the links on the page to route to another page.
• Clicking on browser back and forward buttons to navigate between multiple pages.

So, for the navigation purpose, we Angular CLI imported @angular/router package. If you see in the app.component.html file, you will find this line.

1

<router-outlet></router-outlet>

The router-outlet is an angular directive, which is imported from @angular/router package. It is used as a placeholder to inject the view as per the route configuration.

So, in this way, we have created our first basic Angular 7 app.

Summary

We learned about how to use Angular CLI commands to create our first Angular 7 app. We learned about various parts of an angular app. We learned about components and their parts. We got some brief idea about Angular Routing as well.

I hope you enjoyed this blog.

Read More

• Update Angular 6 to Angular 7 version
• What’s new in Angular 7.0
• Learn Functions In TypeScript
• Cool features of Generics in TypeScript