Creating your first app in Angular 7

Creating your first app in Angular 7

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.

It will ask two questions, like this in below.

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

folder structure

Run your app

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

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

localhost url

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.

components

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.

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

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.

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.

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.

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

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.

welcome message

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

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?

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.

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:

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has 7 Comments

  1. This is really very nice

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu