Angular 2 [PART-4] Components


Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

By Default

Path will be my-app/src/app
By default component have 4 files
1.Typescrypt file => app.component.ts
2.HTML File => app.component.html
3.CSS File => app.component.css
4.Spec File => app.component.spec.ts

Angular 2 Components are powefull each compinent have diffrent typescrypt ,html, css file , so we can create well structured project. html file is used to create structure of component same as normal html project , not that we dont need to start html from bottom () tag , just create whatcomponent needed . CSS File is used to style components and type scrypt files are used to handle scrypts ,

What is type TypeScrypt?

TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features.we can simplify code , multiple performance compare with jquery codes.


    var num:number = 12 

How to create a new Component ?
Using CLI


  ng g component "Your Component Name"



Using CLI

ng g component "componentname"

In Employee project there are 4 normal Components
Home Component
Employee Component
List Employee Component
Page not fount Conponent //Not which is inside others folder

One more Component is in Employee Application that is
Filter Employee List Component which is inside listemployee folder , this component is example for nested component ,

What is nested Component ?
Nested Component is component inside another component , if a component is related to a main component and not used by other components then a component inside main component is the best way
How to create nested component ?
Nested Component is same as Component so we can create nested component like how we create component (ng g component “Component Name”) By Angular CLI , But first you need to relocate your command prompt position inside main component using command cd “location”


Project Explanation

Here in Employee Application default Component is app Component , this will be automatically create when app is created , i this project take this as a main component

App component have

app.component.ts , app.component.html , app.component.css


app.component.html contain View part of component  , here router implemented in this component (navigation link) , will explain in router section .

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
Welcome to {{ title }}!
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item "><a routerLinkActive="active" routerLink="home" class="nav-link ">Home</a></li>
<li class="nav-item"><a routerLinkActive="active" routerLink="employeelist" class="nav-link">Employees List</a></li>
<li class="nav-item"><a routerLinkActive="active" routerLink="newemployee" class="nav-link">Add New Employee</a></li>

and app component have one typescript file that is

Here give title variable have value “Employee App ” and which is display in html as {{title}}

import { Component } from '@angular/core';
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']})
export class AppComponent {
title = 'Empoloyee App';

Nested Component Example

In Employee project Filter Employee Inside list employee Component , filter employee component is used to filter employee list with gender

Leave a Reply

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