6. Software IndustrySultan Ahmed Sagor
What are Components ?
A component controls a patch of screen real estate that we can call a view and
declares reusable UI building blocks for an application.
13. Software IndustrySultan Ahmed Sagor
Components Parent/Child Tree Structure
Sidebar
Component
App Component
Sidebar Component Header Component Courses Component
Search Bar Component Nav-bar Component
14. Software IndustrySultan Ahmed Sagor
What are Components ?
A component controls a patch of screen real estate
that we can call a view and declares reusable UI
building blocks for an application.
21. Software IndustrySultan Ahmed Sagor
Angular App Bootstrapping
main.ts AppModule AppComponent
❖ Main typescript file from where
the execution begins
❖ Initializes the platform browser
where the app will run and
bootstrap AppModule
❖ Root Module of Angular App
❖ Bootstrap AppComponent and
inserts it into the index.html
host web page
❖ Root Component under which
other components are nested
❖ First Component to inserted in
the DOM.
27. Software IndustrySultan Ahmed Sagor
Why Angular App is bootstrapped
❖ Allow us to write Angular App that can be hosted on other environments
❖ Import the platform based Applications
❖ For example,
❖ @angular/platform-browser-dynamic is used for running the app on
browser.
Angular is not only a framework for creating WEB-only Applications
29. Software IndustrySultan Ahmed Sagor
Tour Of Heroes
❖ By the end of this tutorial, we will create the following web page using Angular components.
30. Software IndustrySultan Ahmed Sagor
Tour Of Heroes
❖ You can click the two links above the dashboard
("Dashboard" and "Heroes") to navigate between this
Dashboard view and a Heroes view.
❖ If you click the dashboard hero "Magneta," the router o
pens a "Hero Details“ view where you can change the hero's name.
31. Software IndustrySultan Ahmed Sagor
Tour Of Heroes
Clicking the "Back" button returns you to the Dashboard. Links at the top
take you to either of the main views. If you click "Heroes," the app
displays the "Heroes" master list view.
32. Software IndustrySultan Ahmed Sagor
Tour Of Heroes
❖ When you click a different hero name, the read-
only mini detail beneath the list reflects the new
choice.
❖ You can click the "View Details" button to drill into
the editable details of the selected hero.
34. Software IndustrySultan Ahmed Sagor
Tour Of Heroes
❖ Let us create a Hero component.
❖ Command of creating hero component:
❖ ng generate component heroes
❖ As a result, the following classes/html file will be created:
❖ heroes.component.ts
❖
36. Software IndustrySultan Ahmed Sagor
Create a Hero class
❖ Let us create a Hero class to hold all the information that hero can contain
❖ Path: src/app/hero.ts
export class Hero {
id: number;
name: string;
}
37. Software IndustrySultan Ahmed Sagor
Show the Hero Object
❖ Let us create a Hero class to hold all the information that hero can contain
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
38. Software IndustrySultan Ahmed Sagor
Format with UpperCasePipe
❖ Let us create a Hero class to hold all the information that hero can contain
<h2>{{hero.name | uppercase}} Details</h2>
39. Software IndustrySultan Ahmed Sagor
Edit The hero
❖ 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.
❖ That means data flows from the component class out to the screen and from the screen back to the class.
❖ To automate that data flow, setup a two-way data binding between the <input> form element and the
hero.name property.
41. Software IndustrySultan Ahmed Sagor
The missing FormsModule
❖ 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
42. Software IndustrySultan Ahmed Sagor
AppModule
❖ 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.
❖ Some of the metadata is in the @Component decorators that you added to your component classes. Other
critical metadata is in @NgModule decorators.
❖ The most important @NgModule decorator annotates the top-level AppModule class.
❖ 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.
43. Software IndustrySultan Ahmed Sagor
Import FormsModule
❖ Open AppModule (app.module.ts) and import the FormsModule symbol from the @angular/forms library.
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
❖ Thenn add FormsModule to the @NgModule metadata's imports array, which contains a list of external modules that the app
needs.
imports: [
BrowserModule,
FormsModule
],
44. Software IndustrySultan Ahmed Sagor
Declare the HeroesComponent
❖ Every component must be declared in exactly one NgModule.
❖ You didn't declare the HeroesComponent. So why did the application work?
❖ 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.
45. Software IndustrySultan Ahmed Sagor
Declare the HeroesComponent
import { HeroesComponent } from './heroes/heroes.component';
❖ The HeroesComponent is declared in the @NgModule.declarations array.
declarations: [
AppComponent,
HeroesComponent
],