Home > Angular > Angular 4: Component Example

Angular 4: Component Example

Welcome to the new concept of components in angular 4.

Definition: component is a angular class , Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components.

Components always have a template and only one component can be instantiated per an element in a template.
A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule In app.module file.

we can create the component by using this command.

ng g component ‘component name’

this command will create the component ts file and html and spec.ts and css files with your component name. no need to create the component manually.


First We need to import the angular Component class from the Angular package: @angular/core

import { Component } from '@angular/core'; 

we will use this component with the component decorator @component

Component decorator must have the selector and template. if you don’t add these fields component will not valid. because Angular uses the selector to show the html content in the app. You will find the selectors in the chrome console Elements. This selectors will add dynamically to the DOM when your change the routers. The component should have less than 400 lines of code.

Selector : css selector that identifies this component in a template. means we can use the html templates with selector in the application. another advantage is we can use the selector  tag any where in the application to show the content of template html, its one of the best feature in Angular.

 selector: ‘app’,

Template:  inline-defined template for the view. Means it’s the html code, we can write html code in the template, or we can directly give the html src by giving the template url. If we have less html code its easy to add the html content in the template. no need to create another external html file.

 template: `{{title}}`,

TemplateUrl:  Template url is the external file containing a html template for the view. If we have multiple lines of  html content, its better to keep one html file. we can give the html url path in the ‘templateUrl’ field.

templateUrl: ‘./app.component.html’,

Same for styles: css styles we can add two ways by adding styles, styleUrls fields. we should write the styles in the brackets [], it is style guide.

Style:  Inline-defined styles to be applied to this component’s view means whatever we write the styles in the component, that css styles applied to html content in template or template Url. If we have less content of styles, we can add the styles in the styles filed.

styles: [‘h1 { font-weight: normal; }’]

styleUrls: list of urls to stylesheets to be applied to this component’s view. If we have multiple styles ,its better to keep the external css files

styleUrls: [‘./app.component.css ]

Component Structure:

import { Component } from '@angular/core';
selector: 'app',
template: 'Hello

styles: [‘h4 { font-weight: normal; }’]
export class welcome { title: string = 'World'; }

Here component class must add export. then only it will available in the project. we need to add ‘export’ keyword before the component class


Every Angular app has at least one NgModule class, the root module, conventionally named AppModule. Angular apps are modular and Angular has its own modularity system called NgModules. We will add the components in the ‘declarations’ of this module file.

Import statement  for the module:

import { NgModule } from '@angular/core';

NgModule is a decorator to use the ng module.

most important properties are:

  • declarations the view classes that belong to this module.All component class names  must add in the declarations.  Angular has three kinds of view classes: componentsdirectives, and pipes.
  • exports the subset of declarations that should be visible and usable in the component templates of other modules.
  • imports other modules whose exported classes are needed by component templates declared. We must add the the modules in the ‘imports’ field. whatever we use the modules, that should be place in the imports.
  • providers creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app. These providers are for services. whatever you have services , that services should be add in the provider field. providers will tell to angular how to inject a service.

bootstrap – the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

Module  Structure:

import { NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]

export class AppModule { }

The module declares some objects to be public by marking them with the export key word.


Launch an application by bootstrapping its root module. During development you’re likely to bootstrap the AppModule in a main.ts file like this one

import { platformBrowserDynamic } from '@angular/platform-browser';
import { AppModule } from './app/app.module';

Source code present in the Github


Categories: Angular
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: