Create Angular Component

AIM: Create a new component called hello and render Hello Angular on the page.

What is Component?

Angular apps are built around components, which are Angular's building blocks. Components contain the code, HTML layout, and CSS style information that provide the function and appearance of an element in the app. In Angular, components can contain other components. An app's functions and appearance can be divided and partitioned into components.

Step-1

Create new component (hello component), run the following command in terminal:

.../first-app> ng generate component hello

After executing above command you get directory named hello inside the app directory. Under hello directory you can see the following files:

• hello.component.html
• hello.component.css
• hello.component.ts

Step-2

Edit app.component.html file.

Remove existing code and write the following code:

app.component.html

<app-hello></app-hello>

Step-3

Edit hello.component.html file with following code:

<h1> Hello Angular </h1>

Step-4

Run the following command to build and serve your app.

.../first-app> ng serve

Open browser and enter the URL http://localhost:4200 to find the application.