{"id":4851,"date":"2017-04-30T19:29:59","date_gmt":"2017-04-30T19:29:59","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=4851"},"modified":"2017-05-02T09:50:16","modified_gmt":"2017-05-02T09:50:16","slug":"creating-an-angular-2-component","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/creating-an-angular-2-component\/","title":{"rendered":"Creating an Angular 2 component"},"content":{"rendered":"

An Angular 2 component (written using TypeScript) is a class with the @Component<\/a> decorator\/attribute.<\/p>\n

For example<\/p>\n

\r\nimport { Component } from '@angular\/core';\r\n\r\n@Component({\r\n   \/\/ metadata properties\r\n})\r\nexport class MyComponent {\r\n   \/\/ methods, fields etc.\r\n}\r\n<\/pre>\n
In it’s simplest form we might just supply an inline template to the metadata properties, to define the component’s HTML. Although we can create multiline HTML encased in back ticks `<multiple line HTML>`. We can also store the HTML in a separate file and reference it using templateUrl. Let’s look at some examples.<\/p>\n
Single line HTML<\/strong><\/p>\n
\r\n@Component({\r\n   template: '<p>Hello<\/p>'\r\n})\r\n\/\/ class definition\r\n<\/pre>\n
Multiline HTML (using the backtick)<\/strong><\/p>\n
The backtick ` is used for multiline<\/a> strings.<\/p>\n
\r\n@Component({\r\n   template: `\r\n   <p>Hello<\/p>\r\n   <p>World<\/p>\r\n   `\r\n})\r\n\/\/ class definition\r\n<\/pre>\n
External Template HTML<\/strong><\/p>\n
\r\n@Component({\r\n   templateUrl: 'my-template.html'\r\n})\r\n\/\/ class definition\r\n<\/pre>\n
Ofcourse, the equivalent of an HTML component wouldn’t be so useful if we couldn’t also define styles. So, as you’d expect we also have the metadata property for style that works in the same way as the template.<\/p>\n
The main thing to note is that the stylesUrls is plural and expects and array of styles, i.e.<\/p>\n
\r\n@Component({\r\n  selector: 'my-app',\r\n  templateUrl: 'my-app.html',\r\n  styleUrls: ['my-app1.css', 'my-app2.css']\r\n})\r\n\/\/ class definition\r\n<\/pre>\n
Referring to class fields<\/strong><\/p>\n
At this point, the class itself might seem a little pointless, but by adding fields etc. to it we can reference these from the @Component template itself. <\/p>\n
For example<\/p>\n
\r\n@Component({\r\n   template: '<p>{{greeting}}<\/p>'\r\n})\r\nexport class MyComponent {\r\n   greeting: string = 'Hello';\r\n}\r\n<\/pre>\n
The {{ }} is Angular 2’s expression syntax, meaning it can contain code to access fields, or actual expressions, such as 2 + 3 or method calls such as max(a, b).<\/p>\n","protected":false},"excerpt":{"rendered":"
An Angular 2 component (written using TypeScript) is a class with the @Component decorator\/attribute. For example import { Component } from ‘@angular\/core’; @Component({ \/\/ metadata properties }) export class MyComponent { \/\/ methods, fields etc. } In it’s simplest form we might just supply an inline template to the metadata properties, to define the component’s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[170],"tags":[],"class_list":["post-4851","post","type-post","status-publish","format-standard","hentry","category-angular"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=4851"}],"version-history":[{"count":10,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4851\/revisions"}],"predecessor-version":[{"id":4878,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/4851\/revisions\/4878"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=4851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=4851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=4851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}