Menu
First Components In Angular 6.0

Angular 6 is Google’s JavaScript MVC framework which is used for development of mobile and desktop applications. Due to Angular’s dependency injection, data services for applications are easily assembled. It is a fully integrated framework which enables you to work on projects quickly by making library selection efficient and acting as a simple front-end development tool.

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 their 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 a 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 the @component () decorator.

Make sure you have all the prerequisites for working in Angular ready before you start building your components. Install AngularJS, 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.

tsconfig.json:

This configuration file contains compiler options required to run projects.

package.json:

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

system.config.js:

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 behaviors within the components. Some of the most common properties used are as below:

Selector:

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

template:

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.

templateUrl:

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

moduleId:

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 style attributes or CSS files can be provided with related URLs in the styleUrls attribute.

providers:

The attribute functions for the dependency injection purpose. Services, packages, components, etc. can be injected 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:

    http://localhost:4200/

    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.

Hemant Kumar Hemant Kumar

Hemant, heading PHP/Framework Department is one of the sharpest brains of Techtic Solutions with over 5 years of experience. Hemant understands the upcoming technologies and directs himself & his team to adapt the same. He is passionate about coding and his love for programming has evolved him and his team members over the period of years to achieve the most complex jobs.

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

Relevant Blog

Product Discovery questions to ask a customer about a product
Nisarg Mehta

16 Product Discovery Questions Under 3 Categories [with Examples]

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

Speed up your App Development with this MVP Template

Netflix, Uber, Airbnb, and more launched MVPs faster to test their product in the market. Build yours in 3 simple steps and become a market leader now.

Download Your MVP Template

No thanks, I don't want to speed up my app development

Download Now