Angular 8 Tutorial: Build your First Angular App

In this tutorial, you will learn to build your first TypeScript Angular 8 application from scratch.

You’ll get started with the basic concepts like modules, components and directives.

You’ll also learn about event and property binding.

We’ll be building a simple calculator application to demonstrate all the mentioned concepts.

Also read how to build a full-stack app in our Angular 10 REST API tutorial.

Prerequisites

Let’s get started with the prerequisites. You will need to have:

• The knowledge of TypeScript, HTML and CSS.
• Node and NPM installed on your system.
• Angular CLI 8 installed on your system.

Generating our Angular 8 Calculator Project

After setting up your environment by installing Node and Angular CLI in your system, let’s create a project. So open a terminal and execute the following command:

$ ng new ngcalculator

The CLI will ask you if you would like to add routing to your project – You can say No as we will not need routing in this demo. For the stylesheets format, choose CSS.

You can then wait for the CLI to generate your project and install the required dependencies from npm.

After that, you can start a live development server using the ng serve command:

$ cd ./ngcalculator$ ng serve

Wait for the CLI to compile your project and start the server at http://localhost:4200.

Angular Modules & Components

Angular follows a modular and component-based architecture. In fact, these are two architectures – The modular architecture in which you build your application as a set of modules. The general rule is that you need to use a module for each feature of your application. The component-based architecture in which, you build your application as a set of components.

Note: In our Angular 8 project generated with the CLI, we already have a root module which is conventionally called AppModule and a root component which is conventionally called AppComponent.

The root module and component are the first bootstrapped by the Angular application (In the main.js and app.module.ts files)

According the Angular docs, this is the definition of a module:

Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are containers for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. They can contain components, service providers, and other code files whose scope is defined by the containing NgModule. They can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.

Since we are building a simple calculator application we don’t actually need more than one module so let’s keep it simple and use the root module for implemening our feature.

Note: You can generate a new module using the CLI: ng generate module <name>.

What About Components?

A component controls a part of the screen. It’s simply a TypeScript class (decorated with @Component) with an HTML template that displays the view.

We also don’t need much components in our calculator app, but let’s create a component for encapsulating the calculator view and logic. Open a new terminal, navigate to your project’s folder and run the following command:

$ ng generate component calculator --skipTests 

We added the --skipTests option to tell the CLI to skip generating a file for component tests as we will not add any tests in this tutorial.

The CLI has generated the following files in the src/app/calculator folder:

• src/app/calculator/calculator.component.css for CSS styles.
• src/app/calculator/calculator.component.html for the component’s template or the view.
• src/app/calculator/calculator.component.ts for the component logic.

Open the src/app/calculator/calculator.component.ts file:

import{Component,OnInit}from'@angular/core';@Component({selector:'app-calculator',templateUrl:'./calculator.component.html',styleUrls:['./calculator.component.css']})exportclassCalculatorComponentimplementsOnInit{constructor(){}ngOnInit(){}}

The CalculatorComponent class knows about the template and CSS file thanks to the @Component() decorator which takes the following metadata:

• selector that allows us to give the component a tag name that can be used to reference the component from other templates just like standard HTML tags.
• templateUrl that points to the HTML template that renders the view of the component. You can also use an inline template with the template property instead.
• styleUrls that allows us to associate one or multiple stylesheets to our component.

Since we didn’t include routing in our application, we need a way to access our calculator component from our root component. That’s where the selector property of the component comes handy – we can call our calculator component using the <app-calculator> tag. Open the src/app/app.component.html file, remove the existing content and add:

<app-calculator></app-calculator>

Creating our Calculator UI

We’ll be using the HTML and CSS code from the following JS fiddle to create our calculator UI:

Hope this code and post will helped you for implement Angular 8 Tutorial: Build your First Angular App. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github