{"id":3007,"date":"2017-07-28T09:00:34","date_gmt":"2017-07-28T03:30:34","guid":{"rendered":"https:\/\/code4developers.com\/?p=3007"},"modified":"2017-07-28T10:29:49","modified_gmt":"2017-07-28T04:59:49","slug":"angular-4-components","status":"publish","type":"post","link":"https:\/\/code4developers.com\/angular-4-components\/","title":{"rendered":"Angular 4 Components"},"content":{"rendered":"

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.\u00a0The 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.<\/p>\n

What is a component in Angular 4?<\/strong><\/h3>\n

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.<\/p>\n\n\n\n\n\n
Template<\/strong><\/td>\n\u00d8 It defines the user interface. It contains the HTML, directives and bindings.<\/td>\n<\/tr>\n
Class<\/strong><\/td>\n\u00d8\u00a0 Class Contains the code required for template.<\/p>\n

\u00d8\u00a0 Just like a class in any object-oriented programming language like C# or Java, a class in angular can contain methods and properties.<\/p>\n

\u00d8\u00a0 Properties contain the data that we want to display in the view template and methods contain the logic for the view.<\/p>\n

\u00d8 We use TypeScript to create the class.<\/td>\n<\/tr>\n

Decorator<\/strong><\/td>\n\u00d8 We use the Component decorator provided by Angular to add metadata to the class.<\/p>\n

\u00d8 \u00a0A class becomes an Angular component, when it is decorated with the Component decorator.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Component<\/strong>\u00a0<\/strong>Example<\/strong><\/h3>\n

We have downloaded quick start files from the link https:\/\/github.com\/angular\/quickstart<\/a>. One of the files in these quick start files is the app.component.ts<\/strong> file. You can find this file in the “app” folder. This file contains a component. The name of the component is\u00a0AppComponent<\/strong>. The AppComponent is the root component of the application.<\/p>\n

\/\/Component decorator is provided by the Angular core library, so we have to import it before using it. \/\/The import keyword is similar to using keyword in C#. Any exported member can be imported using \/\/import keyword.\r\n\r\nimport { Component } from '@angular\/core';\r\n\r\n\/\/The class is decorated with Component decorator which adds metadata to the class. We use the @ \/\/symbol to apply a decorator to the class. Applying a decorator on a class is similar to applying an \/\/attribute to a class in C# or other programming languages.\r\n\r\n@Component({\r\n\r\n\/\/ component has several properties. Here we are using just 2. For\r\n\r\n\/\/ the full list of properties refer to the following URL\r\n\r\n\/\/ https:\/\/angular.io\/docs\/ts\/latest\/api\/core\/index\/Component-decorator.html\r\n\r\n\/\/ To use this component on any HTML page we specify the selector\r\n\r\n\/\/ This selector becomes the directive <my-app> on the HTML page\r\n\r\n\/\/ At run time, the directive <my-app> is replaced by the template\r\n\r\n\/\/ HTML specified below\r\n\r\nselector: 'my-app',\r\n\r\n\/\/ The template contains the HTML to render. Notice in the HTML\r\n\r\n\/\/ we have a data-binding expression specified by double curly\r\n\r\n\/\/ braces. We have a defualt value \"Angular\" assigned to \"name\"\r\n\r\n\/\/ property in the AppComponent class. This will be used at runtime\r\n\r\n\/\/ inplace of the data-binding expression\r\n\r\ntemplate: `<h1>Hello {{name}}<\/h1>`,\r\n\r\n})\r\n\r\n\/\/ export keyword allows this class to be exported, so other components\r\n\r\n\/\/ in the application can import and use it if required\r\n\r\nexport class AppComponent {\r\n\r\n\/\/ name is a property and the data type is string and\r\n\r\n\/\/ has a default value \"angular\"\r\n\r\nname: string = 'Angular 4';\r\n\r\n}\r\n<\/pre>\n
 <\/p>\n
Open index.html<\/strong>\u00a0page, we have used the\u00a0AppComponent<\/strong>\u00a0using the directive\u00a0<my-app>. At runtime\u00a0<my-app>\u00a0directive is replaced with the HTML we specified using the selector property in the component decorator.<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title>Angular QuickStart<\/title>\r\n    <base href=\"\/\">\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <link rel=\"stylesheet\" href=\"styles.css\">\r\n    <!-- Polyfill(s) for older browsers -->\r\n    <script src='http:\/\/node_modules\/core-js\/client\/shim.min.js'><\/script>\r\n    <script src='http:\/\/node_modules\/zone.js\/dist\/zone.js'><\/script>\r\n    <script src='http:\/\/node_modules\/systemjs\/dist\/system.src.js'><\/script>\r\n    <script src='http:\/\/systemjs.config.js'><\/script>\r\n    \r\n        System.import('main.js').catch(function (err) { console.error(err); });\r\n    \r\n<\/head>\r\n<body>\r\n    <my-app>Loading AppComponent content here ...<\/my-app>\r\n<\/body>\r\n<\/html><\/pre>\n
Now, start node command prompt and move to respective directory. Run npm install<\/strong> command to install all the dependencies mentioned in package.json.<\/p>\n
Run npm start<\/strong> 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.<\/p>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":5,"featured_media":2649,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[29,44],"powerkit_post_featured":[],"class_list":{"0":"post-3007","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-angular","8":"tag-angular","9":"tag-component"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Mv","jetpack-related-posts":[{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":3007,"position":0},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":3520,"url":"https:\/\/code4developers.com\/angular-5-class-binding-ngclass-directive\/","url_meta":{"origin":3007,"position":1},"title":"Angular 5 Class Binding & ngClass Directive","author":"Nisarg Dave","date":"May 2, 2018","format":false,"excerpt":"In this article we will see how can we bind CSS class to HTML element (class binding) in Angular 5. We will also discuss about ngClass directive to add or remove multiple classes from HTML element with example. Examples I have already created first-app component in my Angular 5 application.\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.1-300x100.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3544,"url":"https:\/\/code4developers.com\/angular-6-crud-part-1-project-setup-routing-service\/","url_meta":{"origin":3007,"position":2},"title":"Angular 6 CRUD \u2013 Part 1: Project Setup, Routing, Service","author":"Nisarg Dave","date":"May 9, 2018","format":false,"excerpt":"This article is Part 1 Angular 6 CRUD. In this article and upcoming article, we will discuss performing CRUD operations in Angular 6 i.e. Creating, Reading, Updating and Deleting in Angular 6 with simple examples. We will also discuss about the Angular 6 Project setup, apply Routing, create service to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/json-server-call-300x297.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3245,"url":"https:\/\/code4developers.com\/interpolation-property-binding-in-angular-4\/","url_meta":{"origin":3007,"position":3},"title":"Interpolation & Property Binding in Angular 4","author":"Nisarg Dave","date":"February 22, 2018","format":false,"excerpt":"In this article, we will discuss about interpolation and property binding in Angular 4. Both are used to bind component class properties to view template. Examples Let\u2019s take simple example of both We will bind imagePath property of the component class to\u00a0element src property using interpolation as shown below.