Angular App with Multiple Components

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

In last article, we saw created a structured app with angular cli. Let us continue what we started in last step. We are going to create angular app with multiple components.

 

Angular App With Multiple Components:

When we start something from scratch, we are focused on making something run as quickly as possible due to which we become casual towards design. A good app will have separate components those don’t interfere with each other much and have a definitive purpose in app. For example, AppComponent should only access other components. Ideally it should not have Bike or other components defined. They should be separate from AppComponent. Let us get back to what we initially started with.

  • We want to show a list of bikes on a page.
  • On click, we want to show details of bike.

Let us create angular app with multiple components. In our case those will be AppComponent and BikeInfoComponent.

 

  • AppComponent is created by default when we create new angular app.
  • Create BikeInfoComponent as done in previous article.
  • Create Bike class that acts as bike object.

Bike:

BikeInfoComponent:

  • Note the @Component annotation. It specifies selector tag, template url and style sheet url for this component. We are going to use <app-bike-info> tag whenever required and corresponding template i.e. bike-info.component.html will be used for rendering.
  • BikeInfoComponent has a field named bike of type Bike. @Input updates data bound properties when change is detected.

bike-info.component.html:

  • *ngIf directive check whether bike is present, if yes, it started executing following code.
  • {{bike.model}} simply evaluates model property of bike.
  • [(ngModel)] = “bike.model” creates a bidirectional binding between html and component. Changes reflected in component as well as html will be detected by both.

Thus, bike-info.component.html simply displays information.

We created a separate component. Now AppComponent does not have to define bike related components. It can simply invoke/access that. It is the motive of angular apps with multiple components.

AppComponent:

  • We created  bikes array and populated it with bikes.
  • As usual, @Component specifies html and css files to be used for AppComponent
  • onSelect(bike: Bike) method accepts a bike object which will be passed from template. It assigns the bike received from template to selectedBike variable.

app-component.html:

  • *ngFor iterates over bikes array in AppComponent. 
  • (click) = “onSelect(bike)” : This is an event binding and calls onSelect() method in AppComponent by sending selected bike as parameter.
  • {{bike.model}} displays model of bike.
  • <app-bike-info [bike] = “selectedBike”> : invokes bike-info.component.html which is used to display bike information. [bike] is property binding which accepts value from selectedBike.

We are done with this,

  • we created BikeInfoComponent and bike-info.component.html
  • We created AppComponent which accesses BikeInfoComponent.

app.module.ts:

 

Save all your files and do npm start from project. You should be able to see screen like below.

App Started
App Started

Click on any list item and you will see details below

Bike details
Bike details

 

You can find whole code on https://github.com/theJavaGeek/angularcheckout branch multiple-components.

I hope the article helped understand angular app with multiple components. There are still lot of changes need to be made. Putting list of bikes in AppComponent isn’t a great idea. We will solve that problem in upcoming article. We are going to learn about services.

Share Button

Prasad Kharkar

Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

2 thoughts on “Angular App with Multiple Components

  • Pingback:Using Angular Services - theJavaGeek

  • October 14, 2017 at 10:55 am
    Permalink

    Hi, What is the use of dist folder. How can I regenerate it. The problem I am facing is, i made some changes in HTML to refer to new component. but it is not reflecting. I suspect the dist folder contents are not updated. I removed the directory and ran npm start but it is failing to load with error as dist/index.html file is not available.

    Reply

Leave a Reply

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