First Components In Angular 6.0

Components are basically classes like other OOPs (Object Oriented Programming) based languages. Components are TypeScript classes with an HTML template that are defined to display elements on the application screen. They can also have an optional set of CSS styles to controls parts of the program. One of the most useful features of components is its re-usability. Components can be reused and repurposed throughout an application and can be exported to other applications. Other than maximum re-usability, components enable easier testing, maintenance and problem isolation.

In Angular 6, components play a highly important role as Applications primarily consist of a branching set of components with a root component as base (the AppComponent). In Angular, components are individual pieces of a more significant system (web application) that communicated with other pieces (components) of the system using inputs and outputs. The component contained in the bootstrap array in the main NgModule module (app.module.ts) is known as the root component. Component classes are defined with the help of @component () decorator.

Make sure you have all the prerequisites for working in Angular ready before you start building your components. Install Node.js, the latest version of TypeScript, any code editor such as Microsoft Visual Studio or Visual Code.

A project in Angular 6 will always contain three major configuration files.


This configuration file contains compiler options required to run projects.


It is a JSON file containing the necessary information regarding different packages required to run the Angular application.


This configuration file is used to load Node modules which are compiled in TypeScript during runtime.

To configure components, the @Component() decorator defines a TypeScript class as a component object. This function takes up different types of parameters, which can be assigned different values to fix certain behaviours within the components. Some of the most common properties used are as below:


It is a string value which represents the component on the browser during runtime.


It acts as an inline template where the property contains the basic HTML  code within its value, which will be needed to display it in the browser.


Also known as ‘external templating’, it is another way by which HTML tags can be defined within a component.


This property is used to resolve the relative path of the template URL or style URL for component objects.

styles or stylesUrls:

It is a property used to provide the style of the components. Inline CSS can be defined using styles attributes or CSS files can be provided with related URLs in the styleUrls attribute.


The attribute functions for the dependency injection purpose. Services, packages, components etc. can be injected in using this attribute.

The following project will show you how to build and edit your first Angular component with a fundamental example:

  • Set up a Development Environment by installing node.js and npm.
  • Install the Angular CLI globally by entering
npm install –g @angular/cli in your command line
  • Create a new project by opening a terminal window by running the following command line:
    ng new my-app

    This command creates the project files, installs the necessary npm packages and populates the project with a default app. The time taken to do this depends on your computer’s processing speed.

  • Launch the application by going to the project directory and launching the server
    cd my-app
    ng serve --open

    The second command ng serve executes the server, watches your files and updates the app as you make changes to files. Using the –open or –o option automatically opens your browser on:


    Wherein you receive a greeting message from the angular app.

  • The CLI would have created the first Angular component for you, which is also the root component. It is named app-root, and it can be found in ./src/app/app.component.ts
    Opening the component file will allow you to change the title property into whatever you want from ‘app’ to, for example, ‘First App’.

    export class AppComponent {
    title = ‘First App’ ;

    The browser will then reload automatically with your new title. Open the directory src/app/app.component.css to add some style to your component, by changing the color and font of your title.

    h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%

Thus, you have successfully created and edited your first Angular component. For a basic, “Hello, World” app this is the extent to which you can customise it. As an entry point for the extensive work that can be done with Angular 6 components, this application should suffice. However, you have barely scratched the surface of what potential Google’s Angular 6 framework can hold for your mobile application development.

Nisarg Mehta Nisarg Mehta

Nisarg Mehta, CEO & Chairman of Techtic Solutions, is the vision of the company. Nisarg is active in operations in his daily routine as he is one of the key decision makers in terms of technological advancements of the company. He is a friendly leader with hardworking, motivating, visionary and passionate personality.

Join over 10,000 people who
love best articles, and tips.

Relevant Blog

Product Discovery Process : 3 Question Categories to Follow
Nisarg Mehta

Product Discovery Process: 3 Question Categories to Follow

Published on Jul 20, 2020 by Nisarg Mehta

According to Harvard Business School’s professor Clayton Christenen, 95% of the new products introduced fail. Tech businesses are fragile, in the sense that there is […]

Start A Project

Let's Start With Discovery Session!

Please share your contact information, for us to connect with you and offer you a free discovery session about your digital product.