Create Components In Angular 5

2
184

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.

CoderFunda

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

CoderFunda

Now, click on Contact.

Summary

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

2 COMMENTS

  1. Hello ,

    I saw your tweets and thought I will check your website. Have to say it looks very good!
    I’m also interested in this topic and have recently started my journey as young entrepreneur.

    I’m also looking for the ways on how to promote my website. I have tried AdSense and Facebok Ads, however it is getting very expensive.
    Can you recommend something what works best for you?

    Would appreciate, if you can have a quick look at my website and give me an advice what I should improve: http://janzac.com/
    (Recently I have added a new page about FutureNet and the way how users can make money on this social networking portal.)

    I wanted to subscribe to your newsletter, but I couldn’t find it. Do you have it?

    Hope to hear from you soon.

    P.S.
    Maybe I will add link to your website on my website and you will add link to my website on your website? It will improve SEO of our websites, right? What do you think?

    Regards
    Jan Zac

    • Hello Jan,
      Still we have not developed the subscribe to your newsletter. And about promotion & branding you need to use social media which is a FREE of cost for everything. Increase your followers from Facebook, twitter etc. One my friend had developed the whole website. I can do one thing, will give you contact details, He will help you to generate revenue from your website & will help you for branding as well.

      You can join me on facebook so will be in touch.

      Regards,
      Rupesh Kahane
      +91 9545273748 (Whatsapp no)

LEAVE A REPLY

Please enter your comment!
Please enter your name here