Create a new Angular 4 Component – Multiple Components Angular Application

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

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

I. Technologies

– Angular 4
– SpringToolSuite: Version: 3.8.0.RELEASE

II. Angular Component


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:

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:

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

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

3. Implement Logic for Angular 4 App
3.1 Create Customer model

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

create customer model


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

– Modify customer.ts as below code:

3.2 Modify AppComponent

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

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

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

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

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

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


Related Posts

Got Something To Say:

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