Create Angular 9 Multiple Components

The previous post, We had introduced how to set up an Angular 9 App with SpringBootSuite. In the tutorial, JavaSampleApproach will show you how to create a new Angular 9 Component and build an Angular Application with multiple Components.

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

Related articles:
How to integrate Angular 9 with SpringBoot Web App and SpringToolSuite

I. Technologies

– Angular 9
– SpringToolSuite: Version: 3.8.0.RELEASE

II. Angular Component

Example:

import { Component, OnInit } from '@angular/core';
import { Customer } from './customer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  customers: Customer[];
  selectedCustomer: Customer;

  constructor() {}

  getCustomers() {
     ...
  }

  ngOnInit(): void {
     this.customers = this.getCustomers();
  }

}

What is Component?
-> Component is a basic building block of Angular Application. It allows us to mark a logic class, and additional metadata for processing at runtime. Components have a template (in above code is ‘./app.component.html‘) and only one component can be instantiated per an element in a template.
A component must belong to an NgModule. So you should declare it in a NgModule:

...
@NgModule({
  declarations: [
    AppComponent,
    CustomerDetailsComponent
  ],
  ...
  providers: [],
  bootstrap: [AppComponent]
})
...

What is bootstrap: [AppComponent]?
bootstrap Component is the main view of Angular application and is used for hosting others views. It is also called the root component. bootstrap Component should be only set in the root module.

III. Practice

Step to do
– Create an Angular Project
– Create a new Angular component
– Implement Logic for Angular4 App
– Run & Check results

1. Create an Angular Project

– See How to setup Angular IDE plugin for SpringToolSuite

Open SpringToolSuite, choose File -> New -> Angular Project,

angular4-create project

Press Finish, -> Installing… Waiting minutes, when the process is Done, we got:

angular4 component - create project done

Project structure:

angular4 component - structure of project

We have a default component is: AppComponent. It has a template: ./app.component.html. AppComponent. AppComponent is default the root component:


@NgModule({
  ...
  declarations: [
    AppComponent,
    CustomerDetailsComponent
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

-> Now, be ready for creating a new component: CustomerDetailsComponent.

2. Create a new Angular component

Right click on folder /angular4client/src/app, choose: File -> New -> Component,

angular4 component - create new angular component

Press Finish:

angular4 component - create new angular component - done

New Project’s Structure:

angular4 component - create new angular component - new project structure

CustomerDetailsComponent is defined in customer-details.component.ts:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-customer-details',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

The CustomerDetailsComponent is automatically registered with AppModule, see app.module.ts file:


...

import { AppComponent } from './app.component';
import { CustomerDetailsComponent } from './customer-details/customer-details.component';

@NgModule({
  declarations: [
    AppComponent,
    CustomerDetailsComponent
  ],

 ...

3. Implement Logic for Angular 9 App

3.1 Create Customer model

Right click on /angular4client/src/app folder, choose: File -> New -> TypeScript Source File,

create customer model

customer-model

Press Finish, then customer.ts file is created under /angular4client/src/app folder.

– Modify customer.ts as below code:


export class Customer {
  constructor(public id: number,
              public firstname: string,
              public lastname: string,
              public age: number) {
  }
}
3.2 Modify AppComponent

– Modify AppComponent in /angular4client/src/app/app.component.ts file as below code:


import { Component, OnInit } from '@angular/core';
import { Customer } from './customer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  customers: Customer[];
  selectedCustomer: Customer;

  constructor() {}

  getCustomers() {
    return [
      new Customer(1, 'Mary', 'Taylor', 24),
      new Customer(2, 'Peter', 'Smith', 18),
      new Customer(3, 'Lauren', 'Taylor', 31),
    ];
  }

  ngOnInit(): void {
     this.customers = this.getCustomers();
  }

  onSelect(cust: Customer): void {
    this.selectedCustomer = cust;
  }
}

– Modify /angclient/src/app/app.component.html:

<h2 style="color:blue">My Customers</h2>
<ul>
	<li *ngFor="let cust of customers"
		[class.selected]="cust === selectedCustomer" (click)="onSelect(cust)">
		<span style="color:blue">{{cust.id}} - {{cust.firstname}}</span>
	</li>
</ul>

<hr>
<customer-detail [customer]="selectedCustomer"></customer-detail>

***Note: customer-detail tag is the selector of CustomerDetailsComponent.

3.3 Modify CustomerDetailsComponent

– Modify CustomerDetailsComponent in file /angular4client/src/app/customer-details/customer-details.component.ts:



import { Component, OnInit, Input } from '@angular/core';

import { Customer } from '../customer';

import { enableProdMode } from '@angular/core';
enableProdMode();

@Component({
  selector: 'customer-detail',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent {

  @Input() customer: Customer;

}

-> Using @Input() to get data from AppComponent


...
<customer-detail [customer]="selectedCustomer"></customer-detail>
...

– Modify CustomerDetailsComponent view in /angular4client/src/app/customer-details/customer-details.component.html file:

<div *ngIf="customer">
	<h3>{{customer.firstname}} details!</h3>
	<div>
		<label>id: </label>{{customer.id}}
	</div>
	<div>
		<label>First Name: </label>{{customer.firstname}}
	</div>
	<div>
		<label>Last Name: </label>{{customer.lastname}}
	</div>
	<div>
		<label>Age: </label>{{customer.age}}
	</div>
</div>
3.4 Run & Check results

Run the Angular project by commandline: npm start. Then make a request: http://localhost:4200/, results:

– List Customers:

List Customers

– Selected Customer’s details:

customer details

IV. Sourcecode

AngularMultipleComponentsClient

3 thoughts on “Create Angular 9 Multiple Components”

  1. Link exchange is nothing else but it is only placing the other person’s web site link on your page at proper
    place and other person will also do similar in favor of you.

  2. 45735 323122The book is great, but this review is not exactly spot-on. Being a Superhero is much more about selecting foods that heal your body, not just eating meat/dairy-free. Processed foods like those mentioned in this review arent what Alicia is trying to promote. In the event you arent open to sea vegetables (and yes, Im talking sea weed), just stop at vegan. 828180

Leave a Reply

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