{"id":15358,"date":"2016-12-05T12:15:19","date_gmt":"2016-12-05T10:15:19","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=15358"},"modified":"2016-12-05T11:24:40","modified_gmt":"2016-12-05T09:24:40","slug":"angularjs-2-series-build-component","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-2-series-build-component\/","title":{"rendered":"AngularJs 2 Series: Build Your Own Component"},"content":{"rendered":"

Introduction<\/h2>\n

AngularJs 2 is a popular JavaScript framework to create Single Page Application (SPA). In a Single Page Application, upon client making the request the data fetched from the server or locally is rendered in the browser instantly without the page refresh. Only the area or part of the DOM, that needs to display the data, is changed. AngularJs 2 comes with wide variety of programming features like Component, Templates, Databinding, Http, Directives, Pipes, Forms, Dependency Injection, Services, Routing and many more. It uses Typescript as the native scripting language. Typescript is written on top of JavaScript and offers plenty of useful features which is otherwise not found in JavaScript. The final code is eventually compiled into JavaScript by the build tool. Typescript is also a strongly typed scripting language and enforces the use of types for every property declared. In this article I will demonstrate the use of AngularJs 2 Component feature.<\/p>\n

Setting Up<\/h2>\n

We will use Angular CLI (Command Line Interface) to build the AngularJs 2 Component. AngularJs CLI provides \u2018ng\u2019 utility that can be used to setup and build the complete Angular project. There are various commands used with \u2018ng\u2019 tool to create different components or features of AngularJs application.
\nWe will install Node.js and use its npm<\/em> utility to install Angular CLI. Download the latest version of Node.js from the official site<\/a> and install the same. Once installed, open the Node.js command prompt and enter the following command to install Angular CLI:<\/p>\n

npm install -g angular-cli<\/code><\/p>\n

Once installed, navigate to the folder where you want to create the project and run the following command on the command prompt:<\/p>\n

ng new my-app<\/code><\/p>\n

This will create the new folder named my-app and different other files and sub-directories that will enable you to kick start with the development of AngularJs 2 application in this new project. The project can be created with the name of your choice. I am using my-app as the project name. Navigate to my-app\\src\\app<\/code> folder. This is the folder where we will do lot of our action or coding work. As you see under the app folder, certain files are created and they have .ts extension which means they are Typescript files. We will ignore these files for the time being and move ahead in creating our first component. Before we deep dive into creating our first component, let\u2019s understand what is a component in AngularJs 2.<\/p>\n

What is Component in AngularJs 2<\/h2>\n

The Component is an element on the web page. It is created as a Typescript class annotated or decorated with @Component<\/code> decorator. Decorators in AngularJs 2 comprises of meta data that provides a specific meaning to the Typescript class. Components are typically used to display something on HTML page. It is therefore backed by what is called as template and styles. Template refers to HTML code fragment and styles refers to CSS styles. Styling is optional though. One more important meta data which every component must have is the selector. Selectors are custom HTML elements that is used to display the component. Component is identified by a selector for e.g. <my-custom-component><\/strong>. This selector is used in HTML page to render the component.<\/p>\n

Creating Item List Component<\/h2>\n

We will create a item list component that will display the list of items on a web page. Open the Node.js command prompt, navigate to my-app\\src\\app folder and run the following command:<\/p>\n

ng generate component item-list<\/code><\/p>\n

The above command will create the item-list component in the new folder named item-list<\/code> and generate some files. Navigate to item-list<\/code> folder and you will see four files generated:<\/p>\n