Creating Components in Angular Application - With Real Time Example

Component Creation using Angular CLI and Manual Approach

What Component Has?

• Component controls a patch of screen called a view 
• Component typescript class defines how angular needs to process the component during run time(through selector, template URL and so on)
• Component templates are just like normal html page which has html controls to interact with users(display elements as well as input elements)
• Difference between normal html and component html is that, It will have only the control which is require to render the view.(Basically this will not have head ,script and even body tag.)

Real time requirement:

• Home page(First Page) need to display two buttons(One is Show Employee Component Button and another one is Show Non-Employee Component  Button)
• If Show Employee Component button is clicked,Employee Component will be loaded below the button
• Similarly If Show Non-Employee Component button is clicked ,Non-Employee component will be loaded below the screen.

Note: This problem will make you to work with different components.But I am sure that, Real time problems will give more challenges than this. Be ready to break the boundaries.

Step 1(Creating and Opening Angular Project):

• Create angular project using Angular CLI.

Command:

ng new My-Angular-First-App

Open the created project in VSCode(Or any IDE)

Refer Creating Angular Application Using CLI for more details.

Step 2(Running the new project):

• Open integrated  terminal from IDE and run the below one

Command:

ng serve

After successful execution,Navigate to http://localhost:4200/

Step 3(Removing the existing content):

• Open app.component.html and remove all the contents.(Empty page will be rendered post this page.)

Step 4(Including Bootstrap Style sheet):Optional

• To design responsive applications ,Bootstrap is one of the right library to go.

Globally Registering Bootstrap in Angular Projects:

Command to download:

npm install --save bootstrap

Referencing the download one: 

• Open angular-cli.json
• Go to styles section and add the following code

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 5(Creating buttons as per requirement):

• We already understood that app.component is the root component for our applications.Hence buttons need to placed over here as per current requirement.

app.component.html code:

<button type="button" class="btn btn-primary">Show Employee Component</button>

<button type="button" class="btn btn-primary">Show Non-Employee Component</button>

Step 6(Creating Employee Component - Manually):

• As per angular cli project structure , All source code lies on src\app
• Angular components have Typescript class , html file and CSS file specific to the component.
• Let us see how to create those manually

Creating Folder:

• To create employee component first we need to add employee folder under src\app

Adding Files to Folder:

• Create the following files under the new folder(employee) and we will see each files in detail.
• employee.component.ts
• employee.component.html
• employee.component.css

Editing Component Files:

employee.component.ts:

• Export a class with component name(here EmployeeComponent).export keyword is specific to typescript language and which allows to access the class from another typescript class.
• To make normal typescript class into angular component use @Component.
• To use @Component in typescript , It should be imported from @angular/core .[Refer first line]
• @Component requires following attributes
• selector ->It will be used in html and if angular finds the mentioned selector in any of the html , It simply replaces selector with templateURL html.
• templateUrl -> Contains html(view) specific to the component
• styleUrls -> Contains CSS styles specific to the component

Final Source Code:

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

@Component({

selector: 'app-employee',

templateUrl: './employee.component.html',

styleUrls: ['./employee.component.css']

})

export class EmployeeComponent{

}

employee.component.html:

• It contains normal html to be rendered.
• As per requirement ,I don't want to have much content. Hence added only "Employee component works" to check whether my component loaded or not.

Final Source Code:

<h1>Employee component works!</h1>

employee.component.css:

• As per requirement , I don't want to have any specific styles. So left empty.But if you want to style your component, Feel free to do that.

Step 7(Registering Employee Component - Manually):

• So far , We have created the employee component but it is not registered to angular framework.
• To register employee Component to angular , Just make the following changes in app.module.ts

Editing app.module.ts:

• Import employee component to app module

import { EmployeeComponent } from './employee/employee.component';

• Add imported component to app module declarations arrays.

declarations: [

AppComponent,

EmployeeComponent

],

Note: Save all the changes. As per requirement , we have created employee component but pending part is,on button click need to render the component.We will solve this, after creating the Non-Employee Component.

Step 8(Registering Non-Employee Component - Angular CLI):

• We have understood , how to create component manually. Now time to use Angular CLI feature for creating component in seconds.

How to do:

• Open new integrated terminal from VSCode(If already terminal is running Just Click "+" button from it.)
• Type following angular CLI command

ng generate component non-employee

                                                 OR

ng g c non-employee

• Here non-employee is the component name. Feel free to give any name you desire.
• Now you could see following files getting created in your projects


• non-employee folder under 'src\app'
• non-employee.component.ts file under non-employee folder 
• non-employee.component.html file under non-employee folder 
• non-employee.component.css file under non-employee folder 
• non-employee.component.spec.ts file under non-employee folder 


• Except "non-employee.component.spec.ts" file , we already understood the things.
• non-employee.component.spec.ts is used for unit testing purpose.You just ignore it as such Or Else delete it from the folder.Later blogs will describe about this further

What else pending:

• As you all think, Pending part is , Registering the new component to angular(Needs to be done in app.module.ts)
• Just check the app.module.ts , Already it is getting registered. Just make sure what all are things done in manually approach present in this component as well.
• So If you create a component using Angular CLI then Registering part also  done by angular CLI. 

Note: Here, I didn't modify the component html content, If you want , feel free to add your own content in non-employee.component.html

Step 9(Rendering Component on button click):

• There are multiple ways there to do the same logic. I am just going with ngIF.(Don't worry I will talk more about ngIf in my blog. Feel free to refer)
• If you see the button , I just added the click event binding to it.(Don't worry i will speak more about event binding)
• If Show Employee button is clicked , Just setting IsEmployeeComClicked to true and IsNonEmployeeComClicked to false. These are simple typescript variables.
• Similarly If Show Non-Employee button is clicked , Just setting IsEmployeeComClicked to false and IsNonEmployeeComClicked to true.
• Based on variable value , Just rending the div tag which has my selector.
• If IsEmployeeComClicked is true , Just rendering the app-employee-component. Similarly IsNonEmployeeComClicked s true ,Just renderng the app-non-employee-component.

Note:

If you add your selector without NgIf , Both the component will be visible to you.Feel free to check.

Complete source code - app.component.html:

<h1> Welcome to Angular World!! </h1>

<button type="button" class="btn btn-primary"

(click)="IsNonEmployeeComClicked = false;IsEmployeeComClicked = true">

Show Employee Component</button>

<button type="button" class="btn btn-primary"

(click)="IsEmployeeComClicked = false;IsNonEmployeeComClicked = true">

Show Non-Employee Component</button>

<div *ngIf="IsEmployeeComClicked">

<app-employee></app-employee>

</div>

<div *ngIf="IsNonEmployeeComClicked">

<app-non-employee></app-non-employee>

</div>

Step 10(Final Outcome):

Complete source:

Download Source Code - GitHub

Conclusion:

• Creating angular component using CLI is super easy.With the help of ng g c mycomponentname command.

Stay tuned. Happy Learning!!