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:

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

Start the application for first view:

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

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

Angular Module

app.module.ts file is a Angular Module where we use to group the components, directives, pipes, and services:

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

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:

ngOnInit is a lifecycle hook Angular which we use to put initialization logic.

-> Check AppModule app.module.ts file:

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

– Modify app.component.html template:

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

– Change the component template customer.component.html as below:

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:

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

– Modify app.component.html template:

With CustomerComponent, we do:

– Modify customer.component.css style:

– Modify customer.component.html template:

-> Visualization result:

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

SourceCode

How to run the below sourcecode:

-> Source Code:

Angular-6-Component

By grokonez | June 13, 2018.



Related Posts


2 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 *

*