Angular 2 - ng-content, transclude y ng-for-template

Nov 16, 2015 8:00:00 AM / by daniel.comas

angular 2

Seguimos con las reviews o temas más destacados en @AngularConnect , hoy con la ponencia "Better concepts, less code in Angular 2". En esta se explicaba algunos conceptos que ya veníamos haciendo en Angular 1 pero esta vez de forma más sencilla y elegante. Vamos a ver como se hace transclusion y como podemos crear plantillas y que las reciba otro component con ng-for.

 

 

Transclude

Vamos a hacer un ejemplo parecído al que se mostró en la presentación.

 

El resultado en el árbol DOM queremos que sea el siguiente:

 

 

 

 

Parent Component

 

Contendrá el component container (A) y los hijos (B)

 

@Component({
selector: 'app',
template: `
module_151811850626664
<a>
<b data="X"></b>
<b data="Y"></b>
</a>
`,
directives: [A, B]
})
export class App {
name: string;
constructor() {
this.name = 'Example about transclude in ng2';
}
}

 

Container Component

Con la directiva ng-content cogemos los elementos childs (B) y son reubicados automáticamente.

 

@Component({
selector: 'a',
template: `
<div class="container">
<ng-content select="b" />
</div>
`
})
export class A {
constructor() {
}
}

 

Child Component

Mostraremos el valor de la propiedad data.

 

@Component({
selector: 'b',
inputs: ['data'],
template: `

`
})
export class B {
constructor() {
}
}

 

Imports 

import {Component, View} from 'angular2/angular2';

 

El resultado por pantallá será el siguiente: 

 

 

 

Importante entender que si nosotros en el container component (A) no tuvieramos el ng-content:

@Component({
selector: 'a',
template: `
<div class="container">
</div>
`
})
export class A {
constructor() {
}
}

 

El resultado en el DOM sería el siguiente, eso es debído a que por defecto se coge el template del hijo:

  

 

ng-for-template

 

Otra de las cosas que hacemos habitualmente en angular 1 es el de recorrer con ng-repeat una plantilla. En este caso recorreremos el array en un component hijo el cuál cogerá la plantilla del padre.

 

Parent Component

[data] -> los datos que pasaremos al component hijo (A)

var-X attribute en template -> X será el elemento que utilizaremos en la plantilla, en  este caso X=item y por lo tanto {{item.title}}

 

@Component({
selector: 'app',
template: `
module_151811850626664
<a [data]="data">
<template var-item>
{{item.title}}
</template>
</a>
`,
directives: [A]
})
export class App {
name: string;
constructor() {
this.name = 'Example about ng-for transclude in ng2';
this.data = [{ title: "1" }, { title: "2" }];
}
}

 

Child Component

@ContentChild -> recibiremos el objeto en memória de <template></template> del component padre (App)

inputs: [_data:data] -> vinculación entre los datos que nos enviará el component padre data con el nombre que tiene en el component vigente _data.

[ng-for-of] -> los datos que utilizaremos para iterar, en este caso los datos de _data.

[ng-for-template] -> la plantilla que utilizará ng-for en cada row de la iteración. En este caso la plantilla obtenida del componente padre obtenida con @ContentChild.

 

@Component({
selector: 'a',
template: `
<div class="container">
<template ng-for [ng-for-of]="_data" [ng-for-template]="itemTmpl"/>
</div>
`,
directives: [CORE_DIRECTIVES],
inputs: ['_data:data']
})
export class A {
private _data;

@ContentChild(TemplateRef) itemTmpl;

constructor() {
}
}

 

Imports

import {Component, View, CORE_DIRECTIVES, ContentChild, TemplateRef} from 'angular2/angular2';

 

 

El resultado será el siguiente:

  

 

 

Información Adicional

Algunas veces nos podemos encontrar en vez de utilizar inputs: ['_data:data] utilizar @Input:

 

@Component({
selector: 'a',
template: `
<div class="container">
<template ng-for [ng-for-of]="_data" [ng-for-template]="itemTmpl"/>
</div>
`,
directives: [CORE_DIRECTIVES]
})
export class A {
private _data;

@Input()
set data(data) {
this._data = data;
}

@ContentChild(TemplateRef) itemTmpl;

constructor() {
}
}

 

Comentaros que es lo mismo.

 

 

 

Topics: Angular, AngularJS, Ingens Developments, JavaScript, Programación, TypeScript

daniel.comas

Written by daniel.comas

Lists by Topic

see all
Servicios gestionados

Categorías

Ver todas