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



By grokonez | May 23, 2021.


Related Posts


Got Something To Say:

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

*