{"id":71674,"date":"2020-01-10T16:10:38","date_gmt":"2020-01-10T10:40:38","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71674"},"modified":"2024-04-12T14:22:38","modified_gmt":"2024-04-12T08:52:38","slug":"setup-2","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/setup-2\/","title":{"rendered":"Setup"},"content":{"rendered":"\n

Go back to Tutorial<\/a><\/p>\n\n\n

Create a new project named angular-tour-of-heroes. The file structure should be as<\/p>\n

\"\"<\/p>\n

Keep the app transpiling and running<\/h4>\n

Enter the following command in the terminal window: npm start<\/p>\n

This command runs the TypeScript compiler in “watch mode”, recompiling automatically when the code changes. The command simultaneously launches the app in a browser and refreshes the browser when the code changes.<\/p>\n

You can keep building the Tour of Heroes without pausing to recompile or refresh the browser.<\/p>\n

Show the hero<\/h4>\n

Add two properties to the AppComponent: a title property for the app name and a hero property for a hero named “Windstorm.”<\/p>\n

app.component.ts (AppComponent class)<\/u><\/p>\n

export class AppComponent {<\/p>\n

title = ‘Tour of Heroes’;<\/p>\n

hero = ‘Windstorm’;<\/p>\n

}<\/p>\n

Now update the template in the @Component decorator with data bindings to these new properties.<\/p>\n

app.component.ts (@Component)<\/u><\/p>\n

template: `<h1>{{title}}<\/h1><h2>{{hero}} details!<\/h2>`<\/p>\n

The browser refreshes and displays the title and hero name. The double curly braces are Angular’s interpolation binding syntax. These interpolation bindings present the component’s title and hero property values, as strings, inside the HTML header tags.<\/p>\n

Hero object<\/h4>\n

The hero needs more properties. Convert the hero from a literal string to a class. Create a Hero class with id and name properties. Add these properties near the top of the app.component.ts file, just below the import statement.<\/p>\n

src\/app\/app.component.ts (Hero class)<\/u><\/p>\n

export class Hero {<\/p>\n

id: number;<\/p>\n

name: string;<\/p>\n

}<\/p>\n

In the AppComponent class, refactor the component’s hero property to be of type Hero, then initialize it with an id of 1 and the name Windstorm.<\/p>\n

src\/app\/app.component.ts (hero property)<\/u><\/p>\n

hero: Hero = {<\/p>\n

id: 1,<\/p>\n

name: ‘Windstorm’<\/p>\n

};<\/p>\n

Because you changed the hero from a string to an object, update the binding in the template to refer to the hero’s name property.<\/p>\n

src\/app\/app.component.ts<\/u><\/p>\n

template: `<h1>{{title}}<\/h1><h2>{{hero.name}} details!<\/h2>`<\/p>\n

The browser refreshes and continues to display the hero’s name.<\/p>\n

Adding HTML with multi-line template strings<\/h4>\n

To show all of the hero’s properties, add a <div> for the hero’s id property and another <div> for the hero’s name. To keep the template readable, place each <div> on its own line.<\/p>\n

The backticks around the component template let you put the <h1>, <h2>, and <div> elements on their own lines, thanks to the template literals feature in ES2015 and TypeScript.<\/p>\n

app.component.ts (AppComponent’s template)<\/u><\/p>\n

template: `<\/p>\n

<h1>{{title}}<\/h1><\/p>\n

<h2>{{hero.name}} details!<\/h2><\/p>\n

<div><label>id: <\/label>{{hero.id}}<\/div><\/p>\n

<div><label>name: <\/label>{{hero.name}}<\/div><\/p>\n

`<\/p>\n

Edit the hero name<\/h4>\n

Users should be able to edit the hero name in an <input> textbox. The textbox should both display the hero’s name property and update that property as the user types.<\/p>\n

You need a two-way binding between the <input> form element and the hero.name property. Refactor the hero name in the template so it looks like this:<\/p>\n

src\/app\/app.component.ts<\/u><\/p>\n

<div><\/p>\n

<label>name: <\/label><\/p>\n

<input [(ngModel)]=”hero.name” placeholder=”name”><\/p>\n

<\/div><\/p>\n[(ngModel)] is the Angular syntax to bind the hero.name property to the textbox. Data flows in both directions: from the property to the textbox, and from the textbox back to the property.<\/p>\n

Unfortunately, immediately after this change, the application breaks. If you looked in the browser console, you’d see Angular complaining that “ngModel … isn’t a known property of input.”<\/p>\n

Although NgModel is a valid Angular directive, it isn’t available by default. It belongs to the optional FormsModule. You must opt-in to using that module.<\/p>\n

Import the FormsModule<\/h4>\n

Open the app.module.ts file and import the FormsModule symbol from the @angular\/forms library. Then add the FormsModule to the @NgModule metadata’s imports array, which contains the list of external modules that the app uses. The updated AppModule looks like this:<\/p>\n

app.module.ts (FormsModule import)<\/u><\/p>\n

import { NgModule }      from ‘@angular\/core’;<\/p>\n

import { BrowserModule } from ‘@angular\/platform-browser’;<\/p>\n

import { FormsModule }   from ‘@angular\/forms’; \/\/ <– NgModel lives here<\/p>\n

import { AppComponent }  from ‘.\/app.component’;<\/p>\n

@NgModule({<\/p>\n

imports: [<\/p>\n

BrowserModule,<\/p>\n

FormsModule \/\/ <– import the FormsModule before binding with [(ngModel)]\n

],<\/p>\n

declarations: [<\/p>\n

AppComponent<\/p>\n

],<\/p>\n

bootstrap: [ AppComponent ]\n

})<\/p>\n

export class AppModule { }<\/p>\n

When the browser refreshes, the app should work again. You can edit the hero’s name and see the changes reflected immediately in the <h2> above the textbox.<\/p>\n

Summary<\/h4>\n

Take stock of what you’ve built.<\/p>\n