Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 Components

Angular is used for building mobile and desktop web applications. The component is the basic building block of Angular. It has a selector, template, style, and other properties, and it specifies the metadata required to process the component.

Components are defined using a @component decorator and a tree of the angular component. It makes our complex application in reusable parts which we can reuse easily. 

The component is the most critical concept in Angular and a tree of components with a root component. The root component is one contained in the bootstrap array in the main ngModule module defined in the app.module.ts file.

One crucial aspect of components is re-usability. A component can be reused throughout the application and even in other applications. Standard and repeatable code that performs a specific task can be encapsulated into a reusable component.

Angular 8 Components

What is Component-Based Architecture?

An Angular application is build of some components which form a tree structure with parent and child components.

A component is an independent block of an extensive system that communicates with the other building blocks of the systems using inputs and outputs. It has an associated view, data, and behavior and has parent and child components.

The component allows maximum re-usability, secure testing, maintenance, and separation of concerns. Go to our Angular project folder and open the src/app folder, which we will see the following files.

App folder: The app folder contains the data we have created for app components.

  • app.component.css: The component CSS file.
  • app.component.html: This component is used for HTML view.
  • app.component.spec.ts: The HTML view of the component
  • app.component.ts: Component code (data and behavior)
  • app.module.ts: The main application module.
Component-Based Architecture

Go further and open the src/app/app.component.ts file and let’s understand the code behind the root component of the application.

Default Code:

Import { Component } from ‘@angular/core’;
 @Component ({
 Selector: ‘app-root’,
 templateUrl: ‘./app.component.html’ ,
 styleUrls: [‘./app.component.css’]
 })
 export class AppComponent {
 title = ‘myfirstapp’;
 } 
Component decorator

Firstly, we import the Component decorator from @angular/core and then we use it to preserve the Typescript AppComponent class. The Component decorator takes an object with multiple parameters, however:

  • selector: It specifies the tag that can be used to call this component in HTML templates just like the standard HTML tags
  • templateUrl: It indicates the path of the HTML template that will be used to display this component.
  • styleUrls: It specifies an array of URLs for CSS style-sheet in the component.

The export keyboard is used to export the component, and it has imported from other components and modules in the application file.

The title variable is a member variable which holds the string' app,' and it is not the part of the legal definition of any Angular component.

Let's see the corresponding template for that component. If we open src/app.component.html

Default Code:

 

Welcome to!

Angular Log

Here are some links to help you start:

Angular 8 Component

The template is an HTML file is used inside an HTML template except for the following tags <script>, <html>, and <body> with the exception that it contains template variable or expression and it can be used to insert values in DOM automatically. It is called interpolation and data binding.

How to create a new Component?

This is the basic building block of Angular.

Open VS code then go to your project source folder then expand the app directory and create a new list named 'server.'

Now, create a component in the server directory. Right-click on server directory and create a new file named as 'server.component.ts.' It is the recently created component.

Components are used to build webpages in all versions of  Angular, but they require modules to bundle them together. Now, we have to register our new component in the module.

Creating a component with CLI

Syntax:

 ng generate component component_name
 Or
 ng g c Component-name 

Let's see how to create an element in the command line.

Open the command prompt and stop ng serve Command if it is running on the browser. Type ng generate component server (where the server is the name of the component we are created to create a new component named server2). We can also use a shortcut commandng g c server for the same task. Firstly, we have to open our Project with cd myfirstapp and then create the component server2.

Creating a component with CLI
generate the first app

In the above screenshot, we see that a new component named "server2" is created. It contains the same other components which we have seen when we generate the first app.

 server2.component.css
 server2.component.html
 server2.component.spec.ts
 server2.component.ts 

server2.component.spec.ts is usually used for testing purpose. We can delete it by clicking right on it.

Angular 8 Component 02
Visual Studio Code