Angular Components are the major part of development which control a patch of screen view. So in the tutorial, we introduce how to create and integrate new Angular 6 Component.
Related posts:
– How to Integrate Angular 6 & SpringBoot 2.0 RestAPI – SpringToolSuite
– Angular 6 Service – with Observable Data for Asynchronous Operation
– Angular 6 Routing/Navigation – with Angular Router Service
Technologies
- Node.js – version v10.4.0
- Angular – version 6
- Visual Studio Code – version 1.24.0
Objectives
We create a Angular 6 project as below structure:
-> result:
Create Angular Project
Firstly, checking whether or not you have ‘Node.js’ & ‘Angular 6 CLI’ installed, by commands: node -v, ng -v. If Not, you can follow the link.
-> Be ready to create a new Angular 6 Application:
ng new angular6-component
Start the application for first view:
ng serve --open
-> ng serve will:
– Build the app
– Start the development server
– Watch the source files
– Then rebuild the app with the changes
The --open flag opens a browser to http://localhost:4200/
-> First look:
Angular Component
Angular Component
The web page above is served by a default Angular component AppComponent.
– Check above Angular project’s structure:
AppComponent is structed by 3 main files:
app.component.ts-> the TypeScript component class codeapp.component.html-> the HTML component templateapp.component.css-> the CSS component privite style
Note: app.component.spec.ts is automatically generated files which contain unit tests for source component.
-> Check the app.component.ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
@Component is a decorator that is used to specify the Angular metadata for the component.
selector: 'app-root' is used in index.html file to display the AppComponent on web browser.
-> Check index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular6Component</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>
Angular Module
app.module.ts file is a Angular Module where we use to group the components, directives, pipes, and services:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
declarations-> an array of components created.imports-> an array of modules requiered to used in the application.providers-> an array of included services.bootstrap-> an array of the main starting app component.
Create New Angular Component
Using Angular CLI to generate a new component customer:
ng generate component customer
-> New project’s structure:
-> Check customer.component.ts file:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
ngOnInit is a lifecycle hook Angular which we use to put initialization logic.
-> Check AppModule app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CustomerComponent } from './customer/customer.component';
@NgModule({
declarations: [
AppComponent,
CustomerComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
-> Now, the new created component CustomerComponent is automatically imported to AppModule & added to array declarations.
Integrate New Angular Component to Application
Preparation
Modify App Component
Firstly, we change the main component AppComponent for simplicity the development as below:
– Modify app.component.ts class:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 6 Application';
}
– Modify app.component.html template:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
-> result:
-> Be ready to implement new created component CustomerComponent and integrate to the Angular application:
Modify New Component
– Add a new json property customer to customer.component.ts file:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
customer = { id: 1, name: 'Ms. Mary', age: 23 };
constructor() { }
ngOnInit() {
}
}
– Change the component template customer.component.html as below:
<p>
{{customer | json}}
</p>
We use Angular’s interpolation binding syntax with double curly {{}} and Jsonpipe pipe (| character) to resolve the customer property in html view.
Integrate New Component
How the Angular flow works?
-> The default AppComponent is the parent component. Any component added later becomes the child component. 'index.html' is starting view.
Now, we need use selector tag of new component CustomerComponent to integrate with parent component AppComponent.
-> By simply adding app-customer tag to app.component.html file as below:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<app-customer></app-customer>
</div>
-> results:
Visualize Angular Components
For graphics the integrated components, now we use component styles. Change .css styles and .html templates as below:
With AppComponent, we do:
– Modify app.component.css style:
.maindiv {
text-align: center;
border-style: solid;
padding:20px;
margin:25px;
width: 500px;
height: 250px;
}
– Modify app.component.html template:
<!--The content below is only a placeholder and can be replaced.-->
<div class="maindiv">
<h2>
Welcome to {{title}}!<br><br>
Here is App Component
</h2>
<div>
<app-customer></app-customer>
</div>
</div>
With CustomerComponent, we do:
– Modify customer.component.css style:
p {
padding: 20px;
margin: 20px;
background-color: black;
color:white;
text-align: center;
}
– Modify customer.component.html template:
<p>
Here is Customer Component! <br><br>
Customer Data: {{customer | json}}
</p>
-> Visualization result:
SourceCode
How to run the below sourcecode:
1. Download Angular-6-Component.zip file -> Then extract it to Angular-6-Component folder. 2. Go to Angular-6-Component folder 3. Run the app by commandline: ng serve --open
-> Source Code:
