Novidades Angular v6.1
Loiane Groner
Loiane Groner
ng update
Novas funcionalidades
- Novo pipe: keyvalue
- Router: Restauração posição do scroll
- Router: URI error handler
- Router: URL update strategy
- Encapsulação da view: ShadowDOM v1
- Suporte TypeScript 2.9
- CLI v6.1
CLI v6.1
- Módulos ES2015 em todos os arquivos
- Mesmo comportamento para serve/test/build
- Vendor source map
-
ng build --prod --source-map --vendor-source-map
-
keyvalue Pipe
#1
@Component({
selector: 'app-key-value',
template: `
<div *ngFor="let curso of cursos">
<ul>
<li *ngFor="let obj of curso | keyvalue">
{{ obj.key }}: {{ obj.value }}
</li>
</ul>
</div>
`
})
export class KeyValueComponent {
cursos = [
{ id: '1', nome: 'Angular'},
{ id: '2', nome: 'Java'},
];
}- string: ordem lexicográfica
- número: valor
- boolean: falso vem antes de true
- tipos diferentes: converte String e compara
@Component({
selector: 'app-key-value',
template: `
<div *ngFor="let curso of cursos">
<ul>
<li *ngFor="let obj of curso | keyvalue:cursosComparator">
{{ obj.key }}: {{ obj.value }}
</li>
</ul>
</div>
`
})
export class KeyValueComponent {
cursos = [
{ id: '1', nome: 'Angular'},
{ id: '2', nome: 'Java'},
];
cursosComparator(a: any, b: any) {
if (a.key === b.key) {
return 0;
}
return a.key > b.key ? -1 : 1;
}
}Router: Restauração posição do scroll
#2
imports: [
RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled'
})
]Router: URI error handler
#3
RouterModule.forRoot(routes, {
malformedUriErrorHandler:
(error: URIError, urlSerializer: UrlSerializer, url: string) => {
// console.log(error);
console.log(url);
return urlSerializer.parse('/url-invalida');
}
})Router: URL update strategy
#4
RouterModule.forRoot(routes, {
urlUpdateStrategy: 'eager', // 'deferred'
})Encapsulação da view: ShadowDOM v1
#5
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
// encapsulation: ViewEncapsulation.Emulates, // padrao
// encapsulation: ViewEncapsulation.Native, // v0
// encapsulation: ViewEncapsulation.ShadowDom, // v1
})TypeScript 2.9
#6
Mais Informações
Obrigada!
