Novidades Angular v6.1

Loiane Groner

@loiane

loiane.com

loiane.training

Loiane Groner

loiane.training

@loiane

github.com/loiane

loiane.com

yt.com/loianegroner

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');
        }
})

Link Issue Angular

Router: URL update strategy

#4

RouterModule.forRoot(routes, {
    urlUpdateStrategy: 'eager', // 'deferred'
})

PR Angular

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
})