3. Let’s practice Let’s practice
3.3 Creating Components Creating Components
3.3 Creating Components
One of the advantages of working with components in Angular 2 is the possibility to reuse them. In other words, when we create a component, we can use it anywhere on our application. One of the main features of componentization is the creation of components inside components.
For the next example, copy the AngularBase and paste it asAngularPanel and add the bootstrap with the command:
$
Add thebootstrap library to theindex.html file:
<html> <html> <head> <head> < <ttiittllee> > <<//ttiittllee>> <!-- 1. Load libraries --> <script
<scriptsrc="node_modules/angular2/bundles/angular2-polyfills.js">></scri\
pt>
<script src="node_modules/systemjs/dist/system.src.js"></script></script> <script
<scriptsrc="node_modules/rxjs/bundles/Rx.js"></script>></script> <script
<scriptsrc="node_modules/angular2/bundles/angular2.dev.js"></script>></script> <link
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.m\ in.css">> <!-- 2. Configure SystemJS --> <script> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } });
System.importimport('app/boot')
.then(nullnull, console.error.bind(console));
</script> </script>
</head> </head>
<!-- 3. Display the application --> <body>
<body> <div
<div class="container">> < <mmyy--aapppp> > </</mmyy--aapppp>> </div> </div> </body> </body> </html> </html>
Let’s change theAppComponent template as the following: import
import {Component} from from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class class AppComponent AppComponent { }
And add the following template to theapp.component.html:
<br/> <br/>
<div
<div class="panel panel-default">> <div
<div class="panel-heading"> > <<//ddiivv>> <div
<div class="panel-body"> > <<//ddiivv>> </div>
By now, we have a Panel from bootstrap as this:
Now let’s create the Panel component that will be a library inside the container directory.
app/container/panel.ts
import
import {Component} from from 'angular2/core';
@Component({
selector: 'panel',
templateUrl: 'app/container/panel.html'
})
export class class Panel Panel { }
The template to the Panel is, for now, the same HTML code of a bootstrap Panel: <div
<div class="panel panel-default">> <div
<div class="panel-heading"> > <<//ddiivv>> <div
<div class="panel-body"> > <<//ddiivv>> </div>
</div>
With the component created, we can add it to theAppComponent changing the template:
app/app.component.html
<br/> <br/>
<panel></panel> <panel></panel>
And also add thePanel directive:
import
import {Component} from from 'angular2/core';
import
import {Panel} from from './container' @Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [Panel] // <<<<<< Add panel to directives })
export class class AppComponent AppComponent { }
Notice how we imported thePanel:
import
import {Panel} from from './container'
This means that we have a library set up on thecontainer.ts file:
app/container.ts
By refreshing the application (remember to use thetsc command and thelive-server)
we will see the same screen, but now we have the Panel component ready. Now we can
create thetitle property like this:
app/container/panel.ts
import
import {Component} from from 'angular2/core';
@Componentselector:({ 'panel',
templateUrl: 'app/container/panel.html', inputs: ['title']
})
export class class Panel Panel { }
Notice that we added the title value into the inputs directive of the@Component setting up and entry variable to the component. We can use it on the template like following:
app/container/panel.html
<div
<div class="panel panel-default">> <div
<div class="panel-heading" *ngIf="title"> > <<//ddiivv>> <div
<div class="panel-body"> > <<//ddiivv>> </div>
</div>
Here we used the*ngIf="title" directive setting up that the<div> will only be inserted if there is a value for the title variable. In this div we add the variable with Databind {{title}}.
If, for example, the*ngIf were not in thediv we would have the following output:
Now change theAppComponent template:
app/app.component.html
<br/> <br/> <panel
And the interface should be as follows: