{"id":71676,"date":"2020-01-10T16:10:49","date_gmt":"2020-01-10T10:40:49","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71676"},"modified":"2024-04-12T14:22:38","modified_gmt":"2024-04-12T08:52:38","slug":"the-hero-editor","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/","title":{"rendered":"The Hero Editor"},"content":{"rendered":"\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-7-developer-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n\n\n<p>The application now has a basic title. Next you will create a new component to display hero information and place that component in the application shell.<\/p>\n<p><strong>Create the heroes component<\/strong><\/p>\n<p>Using the Angular CLI, generate a new component named heroes.<\/p>\n<p>ng generate component heroes<\/p>\n<p>The CLI creates a new folder, src\/app\/heroes\/, and generates the three files of the HeroesComponent. The HeroesComponent class file is as follows:<\/p>\n<p><strong>app\/heroes\/heroes.component.ts (initial version)<\/strong><\/p>\n<p>import { Component, OnInit } from &#8216;@angular\/core&#8217;;<\/p>\n<p>@Component({<\/p>\n<p>selector: &#8216;app-heroes&#8217;,<\/p>\n<p>templateUrl: &#8216;.\/heroes.component.html&#8217;,<\/p>\n<p>styleUrls: [&#8216;.\/heroes.component.css&#8217;]\n<p>})<\/p>\n<p>export class HeroesComponent implements OnInit {<\/p>\n<p>constructor() { }<\/p>\n<p>ngOnInit() {<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>You always import the Component symbol from the Angular core library and annotate the component class with @Component. @Component is a decorator function that specifies the Angular metadata for the component.<\/p>\n<p>The CLI generated three metadata properties:<\/p>\n<ul>\n<li>selector\u2014 the component&#8217;s CSS element selector<\/li>\n<li>templateUrl\u2014 the location of the component&#8217;s template file.<\/li>\n<li>styleUrls\u2014 the location of the component&#8217;s private CSS styles.<\/li>\n<\/ul>\n<p>The CSS element selector, &#8216;app-heroes&#8217;, matches the name of the HTML element that identifies this component within a parent component&#8217;s template.<\/p>\n<p>The ngOnInit is a lifecycle hook. Angular calls ngOnInit shortly after creating a component. It&#8217;s a good place to put initialization logic. Always export the component class so you can import it elsewhere like in the AppModule.<\/p>\n<p><strong>Add a hero property<\/strong><\/p>\n<p>Add a hero property to the HeroesComponent for a hero named &#8220;Windstorm.&#8221;<\/p>\n<p><strong>heroes.component.ts (hero property)<\/strong><\/p>\n<p>hero = &#8216;Windstorm&#8217;;<\/p>\n<p>Show the hero<\/p>\n<p>Open the heroes.component.html template file. Delete the default text generated by the Angular CLI and replace it with a data binding to the new hero property.<\/p>\n<p><strong>heroes.component.html<\/strong><\/p>\n<p>{{hero}}<\/p>\n<p><strong>Show the HeroesComponent view<\/strong><\/p>\n<p>To display the HeroesComponent, you must add it to the template of the shell AppComponent.<\/p>\n<p>Remember that app-heroes is the element selector for the HeroesComponent. So add an &lt;app-heroes&gt; element to the AppComponent template file, just below the title.<\/p>\n<p><strong>src\/app\/app.component.html<\/strong><\/p>\n<p>&lt;h1&gt;{{title}}&lt;\/h1&gt;<\/p>\n<p>&lt;app-heroes&gt;&lt;\/app-heroes&gt;<\/p>\n<p>Assuming that the CLI ng serve command is still running, the browser should refresh and display both the application title and the hero name.<\/p>\n<h3><strong>Create a Hero class<\/strong><\/h3>\n<p>A real hero is more than a name. Create a Hero class in its own file in the src\/app folder. Give it id and name properties.<\/p>\n<p><strong>src\/app\/hero.ts<\/strong><\/p>\n<p>export class Hero {<\/p>\n<p>id: number;<\/p>\n<p>name: string;<\/p>\n<p>}<\/p>\n<p>Return to the HeroesComponent class and import the Hero class. Refactor the component&#8217;s hero property to be of type Hero. Initialize it with an id of 1 and the name Windstorm. The revised HeroesComponent class file should look like this:<\/p>\n<p><strong>src\/app\/heroes\/heroes.component.ts<\/strong><\/p>\n<p>import { Component, OnInit } from &#8216;@angular\/core&#8217;;<\/p>\n<p>import { Hero } from &#8216;..\/hero&#8217;;<\/p>\n<p>@Component({<\/p>\n<p>selector: &#8216;app-heroes&#8217;,<\/p>\n<p>templateUrl: &#8216;.\/heroes.component.html&#8217;,<\/p>\n<p>styleUrls: [&#8216;.\/heroes.component.css&#8217;]\n<p>})<\/p>\n<p>export class HeroesComponent implements OnInit {<\/p>\n<p>hero: Hero = {<\/p>\n<p>id: 1,<\/p>\n<p>name: &#8216;Windstorm&#8217;<\/p>\n<p>};<\/p>\n<p>constructor() { }<\/p>\n<p>ngOnInit() {<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>The page no longer displays properly because you changed the hero from a string to an object.<\/p>\n<p><strong>Show the hero object<\/strong><\/p>\n<p>Update the binding in the template to announce the hero&#8217;s name and show both id and name in a details layout like this:<\/p>\n<p><strong>heroes.component.html (HeroesComponent&#8217;s template)<\/strong><\/p>\n<p>&lt;h2&gt;{{hero.name}} Details&lt;\/h2&gt;<\/p>\n<p>&lt;div&gt;&lt;span&gt;id: &lt;\/span&gt;{{hero.id}}&lt;\/div&gt;<\/p>\n<p>&lt;div&gt;&lt;span&gt;name: &lt;\/span&gt;{{hero.name}}&lt;\/div&gt;<\/p>\n<p>The browser refreshes and displays the hero&#8217;s information.<\/p>\n<p>Format with the UppercasePipe<\/p>\n<p>Modify the hero.name binding like this.<\/p>\n<p>&lt;h2&gt;{{hero.name | uppercase}} Details&lt;\/h2&gt;<\/p>\n<p>The browser refreshes and now the hero&#8217;s name is displayed in capital letters. The word uppercase in the interpolation binding, right after the pipe operator ( | ), activates the built-in UppercasePipe.<\/p>\n<p>Pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several built-in pipes and you can create your own.<\/p>\n<p><strong>Edit the hero<\/strong><\/p>\n<p>Users should be able to edit the hero name in an &lt;input&gt; textbox. The textbox should both display the hero&#8217;s name property and update that property as the user types. That means data flow from the component class out to the screen and from the screen back to the class.<\/p>\n<p>To automate that data flow, setup a two-way data binding between the &lt;input&gt; form element and the hero.name property.<\/p>\n<p><strong>Two-way binding<\/strong><\/p>\n<p>Refactor the details area in the HeroesComponent template so it looks like this:<\/p>\n<p><strong>src\/app\/heroes\/heroes.component.html (HeroesComponent&#8217;s template)<\/strong><\/p>\n<p>&lt;div&gt;<\/p>\n<p>&lt;label&gt;name:<\/p>\n<p>&lt;input [(ngModel)]=&#8221;hero.name&#8221; placeholder=&#8221;name&#8221;&gt;<\/p>\n<p>&lt;\/label&gt;<\/p>\n<p>&lt;\/div&gt;<\/p>\n[(ngModel)] is Angular&#8217;s two-way data binding syntax. Here it binds the hero.name property to the HTML textbox so that data can flow in both directions: from the hero.name property to the textbox, and from the textbox back to the hero.name.<\/p>\n<p><strong>The missing FormsModule<\/strong><\/p>\n<p>Notice that the app stopped working when you added [(ngModel)]. To see the error, open the browser development tools and look in the console for a message like<\/p>\n<p>Template parse errors:<\/p>\n<p>Can&#8217;t bind to &#8216;ngModel&#8217; since it isn&#8217;t a known property of &#8216;input&#8217;.<\/p>\n<p>Although ngModel is a valid Angular directive, it isn&#8217;t available by default. It belongs to the optional FormsModule and you must opt-in to using it.<\/p>\n<p><strong>AppModule<\/strong><\/p>\n<p>Angular needs to know how the pieces of your application fit together and what other files and libraries the app requires. This information is called metadata<\/p>\n<p>Some of the metadata is in the @Component decorators that you added to your component classes. Other critical metadata is in @NgModule decorators.<\/p>\n<p>The most important @NgModule decorator annotates the top-level AppModule class.<\/p>\n<p>The Angular CLI generated an AppModule class in src\/app\/app.module.ts when it created the project. This is where you opt-in to the FormsModule.<\/p>\n<p><strong>Import FormsModule<\/strong><\/p>\n<p>Open AppModule (app.module.ts) and import the FormsModule symbol from the @angular\/forms library.<\/p>\n<p><strong>app.module.ts (FormsModule symbol import)<\/strong><\/p>\n<p>import { FormsModule } from &#8216;@angular\/forms&#8217;; \/\/ &lt;&#8211; NgModel lives here<\/p>\n<p>Then add FormsModule to the @NgModule metadata&#8217;s imports array, which contains a list of external modules that the app needs.<\/p>\n<p><strong>app.module.ts ( @NgModule imports)<\/strong><\/p>\n<p>imports: [<\/p>\n<p>BrowserModule,<\/p>\n<p>FormsModule<\/p>\n<p>],<\/p>\n<p>When the browser refreshes, the app should work again. You can edit the hero&#8217;s name and see the changes reflected immediately in the &lt;h2&gt; above the textbox.<\/p>\n<p><strong>Declare HeroesComponent<\/strong><\/p>\n<p>Every component must be declared in exactly one NgModule. You didn&#8217;t declare the HeroesComponent. So why did the application work?<\/p>\n<p>It worked because the Angular CLI declared HeroesComponent in the AppModule when it generated that component. Open src\/app\/app.module.ts and find HeroesComponent imported near the top.<\/p>\n<p>import { HeroesComponent } from &#8216;.\/heroes\/heroes.component&#8217;;<\/p>\n<p>The HeroesComponent is declared in the @NgModule.declarations array.<\/p>\n<p>declarations: [<\/p>\n<p>AppComponent,<\/p>\n<p>HeroesComponent<\/p>\n<p>],<\/p>\n<p>Note that AppModule declares both application components, AppComponent and HeroesComponent.<\/p>\n\n\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-7-developer-tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">Go back to Tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Go back to Tutorial The application now has a basic title. Next you will create a new component to display hero information and place that component in the application shell. Create the heroes component Using the Angular CLI, generate a new component named heroes. ng generate component heroes The CLI creates a new folder, src\/app\/heroes\/,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8294],"tags":[8317],"class_list":["post-71676","page","type-page","status-publish","hentry","category-angular-7","tag-the-hero-editor"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The Hero Editor - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Hero Editor - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Go back to Tutorial The application now has a basic title. Next you will create a new component to display hero information and place that component in the application shell. Create the heroes component Using the Angular CLI, generate a new component named heroes. ng generate component heroes The CLI creates a new folder, src\/app\/heroes\/,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:38+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/\",\"name\":\"The Hero Editor - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-10T10:40:49+00:00\",\"dateModified\":\"2024-04-12T08:52:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Hero Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Hero Editor - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/","og_locale":"en_US","og_type":"article","og_title":"The Hero Editor - Tutorial","og_description":"Go back to Tutorial The application now has a basic title. Next you will create a new component to display hero information and place that component in the application shell. Create the heroes component Using the Angular CLI, generate a new component named heroes. ng generate component heroes The CLI creates a new folder, src\/app\/heroes\/,...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:38+00:00","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/","name":"The Hero Editor - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-10T10:40:49+00:00","dateModified":"2024-04-12T08:52:38+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/the-hero-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"The Hero Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=71676"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71676\/revisions"}],"predecessor-version":[{"id":87834,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71676\/revisions\/87834"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=71676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=71676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=71676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}