Build Nested Components in Angular

Building Nested Components
Using a Component
As a Directive As a Routing target
App Full
Component page
OR Nested style
Component view
<body>
<pm-root></pm-root>
</body>
What Makes a Component Nest-able?
Its template only manages a fragment of a

larger view
It has a selector
It optionally communicates with its
container
Module
Building a Nested Component
Overview
Using a Nested Component
Passing Data to a Nested Component
Using @Input
Raising an Event from a Nested
Component Using @Output
Container Component
Template
Nested Component <pm-star> </pm-star>

Template
Class
Class
Container Component
Template
Nested Component
<pm-star> </pm-star>
Template
Input
Output
Class
Class
Product List View
Product List View
Using a Nested Component as a Directive
product-list.component.ts star.component.ts
@Component({ @Component({
selector: 'pm-products', selector: 'pm-star',
templateURL: './product-list.component.html' templateURL: './star.component.html'
}) })
export class ProductListComponent { } export class StarComponent {
rating: number;
starWidth: number;
product-list.component.html }
<td>
{{ product.starRating | number }}
</td>
Using a Nested Component as a Directive
}) })
rating: number;
starWidth: number;
<td>
<pm-star></pm-star>
</td>
BrowserModule FormsModule
AppModule
AppComponent
ProductList -
Component
ConvertToSpaces
Pipe
Imports
Exports
Declarations StarComponent
Providers
Bootstrap
Telling Angular About Our Component
app.module.ts
...
import { StarComponent } from './shared/star.component';
@NgModule({
imports: [
BrowserModule,
FormsModule ],
declarations: [
AppComponent,
ProductListComponent,
ConvertToSpacesPipe,
StarComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Passing Data to a Nested Component (@Input)
Container Component
Template
Nested Component
Template
Input @Input()
Class
Class
}) })
@Input() rating: number;
starWidth: number;
<td>
<pm-star></pm-star>
</td>
}) })
starWidth: number;
<td>
<pm-star [rating]='product.starRating'>
</pm-star>
</td>
Raising an Event (@Output)
Container Component
Template
Nested Component
Template
Input @Input()
Output @Output()
Class
Class
}) })
starWidth: number;
@Output() notify: EventEmitter<string> =
new EventEmitter<string>();
}
product-list.component.html
<td>
<pm-star [rating]='product.starRating'>
</pm-star>
</td>
}) })
starWidth: number;
onClick() {
this.notify.emit('clicked!');
}
<td>
<pm-star [rating]='product.starRating'> star.component.html
</pm-star> <div (click)='onClick()'>
</td> ... stars ...
</div>
}) })
starWidth: number;
onClick() {
}
<td>
<pm-star [rating]='product.starRating' star.component.html
(notify)='onNotify($event)'> <div (click)='onClick()'>
</pm-star> ... stars ...
</td> </div>
}) })
export class ProductListComponent { export class StarComponent {
onNotify(message: string): void { } @Input() rating: number;
} starWidth: number;
onClick() {
}
<td>
<pm-star [rating]='product.starRating' star.component.html
(notify)='onNotify($event)'> <div (click)='onClick()'>
</pm-star> ... stars ...
</td> </div>
Nest-able Component's Public API
Container Component
Template
Nested Component
Template
Input @Input()
Output @Output()
Class
Class
Checklist: Nested Component
Input decorator
- Attached to a property of any type
- Prefix with @; Suffix with ()
Output decorator
- Attached to a property declared as an
EventEmitter
- Use the generic argument to define the
event payload type
- Use the new keyword to create an
instance of the EventEmitter
- Prefix with @; Suffix with ()
Checklist: Container Component
Use the directive
- Directive name -> nested component's
selector
Use property binding to pass data to the
nested component
Use event binding to respond to events
from the nested component
- Use $event to access the event payload
passed from the nested component
Summary
Using a Nested Component
Passing Data to a Nested Component
Using @Input
Raising an Event from a Nested
Component Using @Output
Application Architecture
Welcome
Component
App Product List

index.html
Component Component
Star
Component
Product Detail
Product Data Component
Service

Build Nested Components in Angular

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Build Nested Components in Angular

Uploaded by

Copyright:

Available Formats

Building Nested Components

As a Directive As a Routing target

Its template only manages a fragment of a

Nested Component <pm-star> </pm-star>

App Product List

You might also like