Angular 6 Component – How to create & integrate New Angular 6 Component

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:

angular-6-component + project-component-structure-after-adding-new-component

-> result:

angular-6-component + visualize-angular-6-parent-component-child-component-integration

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

angular-6-component + create-new-angular-6-project-by-cli

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-6-component + firstlook-angular-6-project

Angular Component

Angular Component

The web page above is served by a default Angular component AppComponent.

– Check above Angular project’s structure:

angular-6-component + project-component-structure

AppComponent is structed by 3 main files:

  • app.component.ts -> the TypeScript component class code
  • app.component.html -> the HTML component template
  • app.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

angular-6-component + generate-new-angular-component

-> New project’s structure:

angular-6-component + create-new-angular-6-project-structure-after-creating-a-new-component

-> 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:

angular-6-component + integrate-angular-new-component-with-angular-6-application

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:

angular-6-component + visualize-angular-6-parent-component-child-component-integration

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:

Angular-6-Component



By grokonez | June 13, 2018.

Last updated on March 15, 2021.



Related Posts


24 thoughts on “Angular 6 Component – How to create & integrate New Angular 6 Component”

Got Something To Say:

Your email address will not be published. Required fields are marked *

*