{"id":19034,"date":"2017-10-27T12:15:27","date_gmt":"2017-10-27T09:15:27","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=19034"},"modified":"2017-10-26T11:47:20","modified_gmt":"2017-10-26T08:47:20","slug":"angular-4-component-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-4-component-example\/","title":{"rendered":"Angular 4: Component Example"},"content":{"rendered":"

Welcome to the new concept of components in angular 4.<\/p>\n

Definition<\/strong>: component is a angular class , Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components.<\/p>\n

Components always have a template and only one component can be instantiated per an element in a template.
\nA component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule In app.module file.<\/p>\n

Component:<\/u><\/strong><\/p>\n

First We need to import the angular Component from the Angular package: @angular\/core<\/a><\/p>\n

import {\u00a0Component\u00a0} from\u00a0\u2018@angular\/core\u2019;<\/pre>\n
we will use this component with the component decorator @component<\/p>\n
component decorator must have the selector and template.<\/p>\n
Selector<\/strong> : css selector that identifies this component in a template. means we can use the html templates with selector in the application.<\/p>\n
selector: \u2018app\u2019,<\/pre>\n
Template<\/strong>: \u00a0inline-defined template for the view. Means it\u2019s the html code, we can write html code in the template, or we can directly give the html src by giving the template url.<\/p>\n
template: `{{title}}`,<\/pre>\n
TemplateUrl<\/strong>: \u00a0Template url is the external file containing a html template for the view.<\/p>\n
templateUrl: \u2018.\/app.component.html\u2019<\/pre>\n
Same as styles: css styles we can add two ways by adding styles, styleUrls.<\/p>\n
Style: <\/strong>nline-defined styles to be applied to this component\u2019s view<\/p>\n
styles: [\u2018h1 { font-weight: normal; }\u2019]<\/pre>\n
styleUrls<\/strong>: list of urls to stylesheets to be applied to this component\u2019s view. If we have multiple styles we can add by the external css files.<\/p>\n
styleUrls: [\u2018.\/app.component.css ]<\/pre>\n
Component Structure:<\/strong><\/p>\n
import {\u00a0Component<\/a>\u00a0} from\u00a0\u2018@angular\/core\u2019<\/a>;\r\n@Component<\/a>({\r\nselector: \u2018app\u2019,\r\ntemplate: \u2018Hello <h4>{{title}}<\/h4>!\u2019,\r\n\r\nstyles: [\u2018h4 { font-weight: normal; }\u2019]\r\n})\r\nexport class welcome {\u00a0 \u00a0 title: string = \u2018World\u2019;\u00a0 \u00a0 \u00a0}<\/pre>\n
Module:<\/strong><\/p>\n
Every Angular app has at least one NgModule class,\u00a0the\u00a0root module<\/em><\/a>, conventionally named\u00a0AppModule lar apps are modular and Angular has its own modularity system called\u00a0NgModules<\/em>. We will add the components in the declarations of this module file.<\/p>\n
Import statement\u00a0 for the module:<\/p>\n
import { NgModule\u00a0} from\u00a0\u2018@angular\/core\u2019<\/a>;<\/pre>\n
NgModule<\/a>\u00a0is a decorator to use the ng module.<\/p>\n
most important properties are:<\/p>\n