Create Components In Angular 5

Introduction

We have already seen how to create your first Angular application in my previous article, i.e., Getting started with Angular 5. Now, in this article, we will learn what a component is and how to create components.

 

What is a component?

• Every Angular application has at least one component that is used to display the data on the View. 
• The component contains metadata like animation effect, style to apply the components, template, input-output, import etc.
• These are the main building blocks of an Angular application.
• When we create any component, it gets defined in NgModule.
• Suppose you are going to develop a simple application which contains home page, logo - menu list - footer etc.; the blogs page contains blogs list, contact information about the author etc. So we are going to create these components.

Step 1

To create components, go to src/app as you can see the folder structure. Now, by clicking the mouse as shown in the below image, type cmd then press Enter key, so the command prompt will open.

 

 

To create different components, use the following syntax.

ng g c YourComponentName

This will create the component. I am going to create three different components as home, blogs, & contact.

In the home component, I am going to write some HTML code which contains logo & menu list.

In blog & contact, I am going to write just a welcome message to the blog page.

 

Step 2

In home.component.html, write the below code.

<div style="text-align:Left">
  <img width="200" alt="CodderFunda Logo" src="http://coderfunda.com/wp-content/uploads/2018/02/logo2.png">
</div>
<h4>Here are sample menu items </h4>
<ul>
  <li><a routerLink="#home">Home</a></li>
  <li><a routerLink="/blogs">Latest Blogs</a></li>
  <li><a routerLink="/events">Events</a></li>
  <li><a routerLink="/contact">Contact</a></li>
</ul>

The routerLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed.

 

Step 3

In app.component.html, write your selector & we are going to use routing as below.

<app-home></app-home>
<router-outlet></router-outlet>

<router-outlet> is used to specify which comopnent should load. Suppose you are going to access URL localhost:1234/blogs then router matches that URL to route path /blogs and displays the content from blogs.component.html to View.

Step 4

Now, you have to import components into an app.module.ts file as shown in below. Also, specify the entry of each address bar path and the component to render into the router-outlet.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { HomeComponent } from './Component/home/home.component';
import { BlogsComponent } from './Component/blogs/blogs.component';
import { enableProdMode } from '@angular/core';
import { ContactComponent } from './Component/contact/contact.component';
import { EventsComponent } from './Component/events/events.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BlogsComponent,
    ContactComponent,
    EventsComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'blogs', component: BlogsComponent },
      { path: 'contact', component: ContactComponent },
      { path: 'events', component: EventsComponent }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5

Now, run the application by using the below command.

ng serve -o

Click on the menu item Latest Blogs.

 

 

Now, click on Contact.

 

 

 

Summary

In this article, we learned what a component is and how to create a component.