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:




  
  Angular6Component
  

  
  


  


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:


Welcome to {{title}}!

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

{{customer | json}}

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:


Welcome to {{title}}!

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


Welcome to {{title}}!

Here is App Component

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:

Here is Customer Component!

Customer Data: {{customer | json}}

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

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

  1. Asking questions are really pleasant thing if you are not understanding something
    totally, except this post provides pleasant understanding yet.

  2. Тhank you, I have recently bee looking for information ɑpproximately this subject for a long time and yours is the best І have found ooᥙt till now.
    However, what in regards to the bottom
    line? Are yоu posіtive in regards tto the
    sourcе?

  3. Hey there! This post couldn’t be written any better!
    Reading this post reminds me of my old room mate! He always kept chatting about this.

    I will forward this page to him. Pretty sure he will have a good read.
    Thank you for sharing!

  4. Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed surfing around your blog posts.

    In any case I will be subscribing to your feed and I hope you
    write again very soon!

  5. I really love your website.. Great colors & theme. Did you make this site yourself?
    Please reply back as I’m wanting to create my very own site and would love to find out where you got this from or what the theme is named.

    Thank you!

  6. Hi there this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML.

    I’m starting a blog soon but have no coding knowledge so I wanted to
    get guidance from someone with experience. Any help would be enormously appreciated!

  7. each time i used to read smaller articles or reviews
    that also clear their motive, and that is also happening with
    this piece of writing which I am reading now.

  8. My partner and I stumbled over here from a different website and thought I might check things out.
    I like what I see so i am just following you.
    Look forward to looking over your web page repeatedly.

  9. I was suggested this web site by my cousin. I am
    not positive whether or not this submit is written through him as no one else realize such detailed
    about my trouble. You are wonderful! Thank you!

  10. It’s remarkable to visit this website and reading the views of all
    mates on the topic of this piece of writing, while
    I am also zealous of getting know-how.

Leave a Reply

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