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!

Novidades Angular v6.1

By Loiane Groner

Novidades Angular v6.1

Novidades Angular v6.1

  • 1,400