Angular 4 Components

In this article, we will discuss about what is a component in Angular 4? In Angular 4 everything is component. Rather we can say components are the basic building blocks of Angular 4 applications. Component based web development is the future of web development. The advantage of the component-based approach is that, it facilitates greater code reuse. From unit testing standpoint, the uses of components make Angular 4 more testable. We will discuss what a component is and how to build components with examples in this article.

What is a component in Angular 4?

A component in Angular 4 is a class with a template and a decorator. So, in simple terms a component in Angular 4 is composed of these 3 things.

Template Ø It defines the user interface. It contains the HTML, directives and bindings.
Class Ø  Class Contains the code required for template.

Ø  Just like a class in any object-oriented programming language like C# or Java, a class in angular can contain methods and properties.

Ø  Properties contain the data that we want to display in the view template and methods contain the logic for the view.

Ø We use TypeScript to create the class.

Decorator Ø We use the Component decorator provided by Angular to add metadata to the class.

Ø  A class becomes an Angular component, when it is decorated with the Component decorator.


Component Example

We have downloaded quick start files from the link One of the files in these quick start files is the app.component.ts file. You can find this file in the “app” folder. This file contains a component. The name of the component is AppComponent. The AppComponent is the root component of the application.


Open index.html page, we have used the AppComponent using the directive <my-app>. At runtime <my-app> directive is replaced with the HTML we specified using the selector property in the component decorator.

Now, start node command prompt and move to respective directory. Run npm install command to install all the dependencies mentioned in package.json.

Run npm start command which first compiles the application, then simultaneously re-compiles and runs the lite-server. Both the compiler and the server watch for file changes.

TypeScript is compiled to JavaScript which the browser understands and renders. Our TypeScript code for this component is present in app.component.ts file. Notice a corresponding app.component.js is file is generated on build.

Nisarg Dave
He works as a software developer. He has hands-on experience on .net and other Microsoft technologies. He also works on AngularJS, KnockOutJS.
Nisarg Dave on FacebookNisarg Dave on Linkedin

Leave a Reply

%d bloggers like this: