Angular components

Software IndustrySultan Ahmed Sagor
Angular 7
A framework for Presentation Layer

7

Angular Tutorial: Road Covered So Far

What are Components ?
Now we will discuss components in details

A component controls a patch of screen real estate that we can call a view and
declares reusable UI building blocks for an application.

Components Example

Components Example
Sidebar
Component

Components Example
Sidebar
Component
< >
Courses Component
< >

Components Example
Sidebar
Component
Courses Component
Search Bar < > Nav-Bar < >

Components Example
Sidebar
Component
Courses Component
Search Bar < > Nav-Bar < >
Header Component < >

Components Parent/Child Tree Structure
Sidebar
Component
App Component
Sidebar Component Header Component Courses Component
Search Bar Component Nav-bar Component

A component controls a patch of screen real estate
that we can call a view and declares reusable UI
building blocks for an application.

Creating a Component ?
Now we will discuss how to create
components

Creating a Component

Creating a Component
A Simple
Type-Script Class
Meta-Data
For Class

AppComponent: The Root Component ?
Angular is not just a framework.

Key Points To Remember

Angular App Bootstrapping
Let us know some basic staffs

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.

main.ts

AppModule

AppComponent

Why Angular Apps Are Bootstrapped
Lets discuss

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

Application Specification
Let us do some practical

Tour Of Heroes
❖ By the end of this tutorial, we will create the following web page using Angular components.

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.

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.

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.

Tour Of Heroes Demo
Let us do develop the application

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
❖

heroes.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero: Hero = { id: 1, name: 'Windstorm' };
constructor() { }
ngOnInit() { }
}

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;
}

Show the Hero Object
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>

Format with UpperCasePipe
<h2>{{hero.name | uppercase}} Details</h2>

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.

Two-Way Binding
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>

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

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.

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
],

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.

Declare the HeroesComponent
import { HeroesComponent } from './heroes/heroes.component';
❖ The HeroesComponent is declared in the @NgModule.declarations array.
declarations: [
AppComponent,
HeroesComponent
],

Any
question?

Thank You

Angular components

More Related Content

What's hot

What's hot (20)

Similar to Angular components

Similar to Angular components (20)

Recently uploaded

Recently uploaded (20)

Angular components